深入理解Vue的过度与动画深入理解Vue的过度与动画

1.在插入、更新、移除DOM元素时，在合适的时候给元素添加样式类名
2.元素有一个进入过程：Enter，一个离开过程Leave。
两个过程都有一个初始态（）和终止态（-to）和两态之间的过度效果（activate）

文章图片

3.写法

文章图片

动画：写好v-enter-active（替换come这个名字）和v-leave-active（替换go）（这两个是vue的工作）和动画atguigu（这个是css3的效果）。再用把动画元素包起来就行。appear是让元素一加载就执行一次v-enter-activate
深入理解Vue的过度与动画
文章图片

文章图片

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

文章图片

或者

文章图片

/* .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; }

多个元素过度：