<div> <button @click="change">点击随机隐藏和显示</button> <br/> <div v-if="box" transition="bounce">1</div> </div> <script> Vue.transition("bounce", { enterClass: 'bounceInLeft', leaveClass: 'bounceOutRight' }) var vm = new Vue({ el: '#app', data: { box: true }, methods: { change: function () { this.box = !this.box; } } }); </script>
解释：
【1】进行动画的标签，需要有animated这个class；
【2】enterClass和leaveClass相当于之前的xxx-enter和xxx-leave；
【3】效果是从左边闪进来，从右边闪出去。
【4】需要在声明Vue实例前设置动画，否则会无效；
⑥使用animation动画
在Vuejs中，animation动画和transition动画是不同的。
简单来说，transition动画分为三步：常驻类，进入时触发的类，退出时触发的类；只有常驻类有transition动画属性，其他两步只有css状态；
而animation动画分为两步：进入时触发的类，退出时触发的类。当然，还有xxx-transition这个类存在于dom之中（这个类可以用于设置动画原点，或者干脆不设置这个类）；
在animation动画中，进入和退出时的class类，都应该有动画效果，例如：
@keyframes fat { 0% { width: 100px } 50% { width: 200px } 100% { width: 100px } } .fat-leave, .fat-enter { animation: fat 1s both; }
进入和退出时，执行的类名和transition一样，都是xxx-leave和xxx-enter这样格式的；
当然，也可以自定义类名。
示例代码：
<style> .box { width: 100px; height: 100px; border: 1px solid red; display: inline-block; } @keyframes fat { 0% { width: 100px } 50% { width: 200px } 100% { width: 100px } } .fat-leave, .fat-enter { animation: fat 1s both; } </style> <div> <button @click="change">点击随机隐藏和显示</button> <br/> <div v-if="box" transition="fat">1</div> </div> <script> var vm = new Vue({ el: '#app', data: { box: true }, methods: { change: function () { this.box = !this.box; } } }); </script>
效果：
消失：先变宽，再恢复，然后消失；
进入：出现，变宽，再恢复，停留；
这里偷懒共用了同一个动画效果。
⑦除此之外，还有
【1】显式声明动画类型（假如动画同时存在transition和animation，且分情况执行其中一种）；
【2】过渡流程详解（触发动画时，js钩子执行与css执行的顺序）；
【3】CSS动画（就是animation，像上面那样已经写过了，具体略）；
【4】JavaScript过渡（不是js钩子，钩子是指在某个阶段会调用某个函数，但这个钩子跟动画无关），用JavaScript来控制动画，比如jquery的animate方法；
【5】v-for使用的渐进过渡；
由于暂时用不上，所以略掉，需要查看的请打开连接：
以上所述是小编给大家介绍的Vuejs第七篇之Vuejs过渡动画案例全面解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: