脚本宝典收集整理的这篇文章主要介绍了深入理解Vue的过度与动画,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1.在插入、更新、移除DOM元素时,在合适的时候给元素添加样式类名
2.元素有一个进入过程:Enter,一个离开过程Leave。
两个过程都有一个初始态()和终止态(-to)和两态之间的过度效果(activate)
3.写法
动画:写好v-enter-active(替换come这个名字)和v-leave-active(替换go)(这两个是vue的工作)
和动画atguigu(这个是css3的效果)
。再用<transITion>把动画元素包起来就行。apPEar是让元素一加载就执行一次v-enter-activate
过度:这里的起点终点是vue的作用。
<style scoped> /* .todo-enter-active{ animation: myAnamite 1s; } .todo-leave-active{ animation: myAnamite 1s reverse; } @keyframes myAnamite { From{ transform: translatex(-100%); } to{ transform: translateX(0); } } */ .todo-enter,.todo-leave-to{ transform: translateX(-100%); } .todo-leave,.todo-enter-to{ transform: translateX(0); } .todo-enter-active,.todo-leave-active{ transition: 1s linear; } </style>
多个元素过度:
第三方动画库:anamite.css库
安装:
引入:在script中 import ‘aniMATE.css'
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的深入理解Vue的过度与动画全部内容,希望文章能够帮你解决深入理解Vue的过度与动画所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。