搜索热词
基本流程
使用对要执行动画的标签内容进行包裹。
如果你使用css动画,则该标签应当具有name属性,可以使用name-时机进行链接书写css类。
如果你使用animate.css等第三方动画效果库,则可直接添加动画属性即可。
原生CSS
下面是css类,v对应的name属性。
时机
描述
v-enter
定义进入过渡的开始状态
v-enter-to
定义进入过渡生效时的状态
v-active
定义进入过渡的结束状态
v-leave
定义离开过渡的开始状态
v-leave-active
定义离开过渡生效时的状态
v-leave-to
定义离开过渡的结束状态
.show-enter,.show-leave-to{
transition: all 2s;
opacity: 0;
}
.show-enter-active,.show-leave{
transition: all 2s;
}
切换
const app = new Vue({
el: "#app",data: {
status: false,}
})
第三方库animate
使用第三方库animate,指定动画类即可
描述
enter-active-class
开始的动画类
leave-active-class
结束的动画类
切换
const app = new Vue({
el: "#app",}
})
总结
以上是编程之家为你收集整理的Vue 动画渲染全部内容,希望文章能够帮你解决Vue 动画渲染所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。