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>