vue中使用animation来进行动画设置

在页面中引入animate的css样式

    <link rel="stylesheet" href=".animate.min.css">

    <script src="vue.js"></script>

  

 

书写样式的时候，可以直接只写两个时间段即可，给这两个时间段添动画类名

        <!-- 1、使用tranform来包裹需要对那个元素进行包裹 -->

        <transition enter-active-class="bounceInLeft" leaver-active-class="bounceInRight">

            <h3 v-if="falge" class="animated">按钮控制元素的显示与隐藏</h3>

        </transition>

     

可是设置进入的时间和离开的时间 :duration="200" 

 

        <!-- 1、使用tranform来包裹需要对那个元素进行包裹 -->

   

      <transition enter-active-class="bounceInLeft" leaver-active-class="bounceInRight" :duration="200" >

            <h3 v-if="falge" class="animated">按钮控制元素的显示与隐藏</h3>

        </transition>

 

 

 可是将duration设置为对象 里面写进入时间，和离开时间

<transition

　　enter-active-class="swing" 

　　leave-active-class="wobble" 

　　:duration="{enter:200 , leave:800}" >

   <h3 v-if="falge" class="animated">按钮控制元素的显示与隐藏</h3>

</transition>