Vue_同時使用過渡和動畫

在上一節我們用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>           

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

這樣在第一次加載時就會顯示動畫。

事實上，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>           

• 9
• 10

在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>           

• 11
• 12

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

原文釋出時間：06月30日

原文作者：_dalianmiao

本文來源

CSDN部落格

如需轉載請緊急聯系作者