标签：func tran head 一加 ati 自定义 link and color
在Vue中同时使用过渡和动画
1.在需要设置过渡动画的元素外包裹<transition>标签，然后再设置对应的样式即可（v-enter,v-enter-active,v-leave-to,v-leave-active）
2.如果不想用默认的类，可以自定义类如，enter-active-class="active",然后写.class的样式即可。
3.使用animate.css,只要在需要动画的标签外的transition标签里添加对应属性，比如enter-active-class="animate swing",leave-active-class="animate shake"即可，但前提要引入animate.css
4.若想一加载就有动画效果需要加入appear属性和自定义class:appear-active-class="自定义类名"
5.同时存在过渡动画和其他动画，但时长不一样时，可以设置type属性来决定以谁为准，如：type="transition",则以过渡动画为准。
6.当要自定义时长时，可以这样， ：duration="3000",以毫秒计，这样则是自己定义的时长为准，更复杂的可以设置入场和出场动画， ：
duration="{enter:5000,leave:10000}"
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的CSS动画原理</title> <script src="./vue.js"></script> <link rel="stylesheet" type="text/css" href="./Animate.css"> <style> .fade-enter,.fade-leave-to{ opacity:0; } .fade-enter-active,.fade-leave-active{ transition:opacity 3s; } </style> </head> <body> <div id="root"> <transition :duration="{enter:5000,leave:10000}" name="fade" appear enter-active-class="animate swing fade-enter-active" leave-active-class="animate shake fade-leave-active" appear-active-class="animated swing" > <div v-show="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> <script> var vm=new Vue({ el:‘#root‘, data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script> </body> </html>
标签：func tran head 一加 ati 自定义 link and color
原文地址：https://www.cnblogs.com/tengteng0520/p/12074671.html
