在上一節我們用animate動畫庫，在重新整理頁面時沒有動畫

如何解決第一次就顯示動畫內容呢？

在transform 上加上appear 和appear-active-class

 <transition name='fade'
       appear
       enter-active-class='animated swing' 
       leave-active-class='animated flash'
       appear-active-class='animated swing'>
   <div v-if="cssanimate"
 
>hello css animate</div>
</transition>
   <button @click='cssclick'>css動畫</button>

這樣在第一次載入時就會顯示動畫。
事實上，animate動畫提供的是什麼動畫呢？就是@keyframes的這種CSS3的動畫效果。
我們也可以在動畫加上transition 過渡動畫效果。

<transition 
     name='fade'
     appear
     type='transition'
     enter-active-class=
 
'animated swing fade2-enter-active' 
     leave-active-class='animated flash fade2-leave-active'
     appear-active-class='animated swing'>
  <div v-if="cssanimate3">hello css animate3</div>
</transition>
  <button @click='cssclick3'>css動畫3</button>

在CSS中定義過渡動畫：

<style
 
>
.fade-enter,.fade-leave-to{
     opacity:0;
}
.fade-enter-active,.fade-leave-active{
    transition:opacity 3s;
}
</style>

transition加上type=‘transition’的原因是，transition的過渡時長可能是3s是自己定義的，但是animate預設的過渡時長為1s，所以會有衝突，type的作用是以誰的時長為總時長
當然我們也可以自己自定義時長。

<transition 
     name='fade'
     appear
     :duration ="5000"
    // :duration ="{enter:5000,leave:10000}"
    // 更復雜的定義時長
     enter-active-class='animated swing fade2-enter-active' 
     leave-active-class='animated flash fade2-leave-active'
     appear-active-class='animated swing'>
  <div v-if="cssanimate3">hello css animate3</div>
</transition>
  <button @click='cssclick3'>css動畫3</button>

如此便實現動畫和過渡的效果。