深入理解Vue的过度与动画

1.在插入、更新、移除DOM元素时,在合适的时候给元素添加样式类名

2.元素有一个进入过程:Enter,一个离开过程Leave。

两个过程都有一个初始态()和终止态(-to)和两态之间的过度效果(activate)

深入理解Vue的过度与动画_第1张图片

3.写法

深入理解Vue的过度与动画_第2张图片

动画:写好v-enter-active(替换come这个名字)和v-leave-active(替换go)(这两个是vue的工作)动画atguigu(这个是css3的效果)。再用把动画元素包起来就行。appear是让元素一加载就执行一次v-enter-activate

深入理解Vue的过度与动画_第3张图片

深入理解Vue的过度与动画_第4张图片

过度:这里的起点终点是vue的作用。

深入理解Vue的过度与动画_第5张图片

或者

深入理解Vue的过度与动画_第6张图片

多个元素过度:

深入理解Vue的过度与动画_第7张图片

第三方动画库:anamite.css库

安装:

引入:在script中 import ‘animate.css'

深入理解Vue的过度与动画_第8张图片

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

你可能感兴趣的:(深入理解Vue的过度与动画)