vue动画体验

最近学习了vue动画，觉得很有意思。写了一个小demo，不多说了，把代码~效果：点击移出按钮，列表块向左移动，逐渐消失，点击移入按钮，代码块从右向左移动，同时逐渐显示作者静止不会上传动态图片，看截图吧~...~实现思路：1.通过show的true和false控制列表是否显示。2、使用封装的组件，为元素的进入和离开添加过渡效果。实现原理：在动画插入的初始状态之前，我把列表的透明度调整为0，同时让他向右平移50px。因为的转场效果会在动画完成后移除类，回到原来的效果。当我点击触发动画时，动画的持续时间（动画曲线之类的）被添加到过渡效果中。相当于从translateX(50px)andopacity:1慢慢回到原来的状态translateX(0px)andopacity:1。同理，移除的动画是向左平移50px，透明度为0，移除的过渡效果加上动画时长。达到向左逐渐消失的效果。很简单吧？嗯，例子很简单~，重点来了，我们来回顾一下vue的动画。关于过渡的类名（.class）：我画了一个类名过渡状态的泳道图，看这里~怎么样~，是不是有点花心~，嗯...，我喜欢花里胡哨的东西...一般情况下：v-enter在插入元素之前生效。在插入v-enter-active元素之前删除下一帧?在过渡/动画完成之后。动画完成后，将其移除。插入v-enter-to元素后~过渡/动画完成后。动画完成后，将其移除。v-leave在离开转换被触发时生效。下一帧被移除v-leave-active一旦离开转换被触发~在转换/动画完成后激活。动画完成后，将其移除。v-leave-to触发离开过渡后的下一帧~过渡/动画完成后。动画完成后，将其移除。组件将有一个默认的v-前缀。如果使用，v-enter将替换为name-enter。有的同学看到这里会想，你上面的.class里面可以写transform，那你能写animation吗？当然~，当然还是有区别的。官方回答：css动画用法和csstransition一样，不同的是在动画中，v-enter类名不会在节点插入dom后立即删除，而是在animationend事件结束时删除触发。嗯，该下班了~今天先来~有没有同学，看到.class，想到了attribute属性自定义转场类名，javascript钩子函数在函数中写动画，多组件转场，list过渡……附上vue官网网址：https://cn.vuejs.org/v2/guide...。再次感谢这个开源时代！给我们提供这么清晰的官方文档~