背景
內置的<transition>和<transition-group>組件同時支持CSS和JS鉤子
過渡和動畫的不同:
過渡就是從一個狀態向另一個狀態插入值(從起始狀態,到結束狀態,再回來)
動畫不同,可以在一個聲明中設置多個狀態(比如動畫50%的位置設置一個關鍵幀,
然後在70%的位置,也可以設置延遲屬性實現複雜運動)
CSS過渡
假設有一個簡單的模態窗。通過點擊按鈕顯示或隱藏模態窗。可以這樣做:
創建一個按鈕的vue實例,在實例中創建一個子組件,設置數據的狀態
這樣可以通過切換布爾值並添加事件處理實現子組件的顯示及隱藏。
可以使用v-if或者v-show來切換組件的可見性。也可以使用slot放置模態窗的切換狀態
過渡部分結構:
<transition name="fade">
<app-child v-if="isShowing" class="modal">
<button @click="toggleShow">
Close
</button>
</app-child>
</transition>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.25s ease-out;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
CSS動畫
所有有趣的動畫都是基於enter-active和leave-active
可以給每一個實例一個特殊類
enter-active-class="toasty"
leave-active-class="bounceOut"
動畫部分結構:
<transition
name="ballmove"
enter-active-class="bouncein"
leave-active-class="rollout">
<div v-if="isShowing">
<app-child class="child"></app-child>
</div>
</transition>
對於反彈對畫,如果使用CSS的話,需要設置大量關鍵幀,
@mixin ballb($yaxis: 0) {
transform: translate3d(0, $yaxis, 0);
}
@keyframes bouncein {
1% { @include ballb(-400px); }
20%, 40%, 60%, 80%, 95%, 99%, 100% { @include ballb() }
30% { @include ballb(-80px); }
50% { @include ballb(-40px); }
70% { @include ballb(-30px); }
90% { @include ballb(-15px); }
97% { @include ballb(-10px); }
}
.bouncein {
animation: bouncein 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.ballmove-enter {
@include ballb(-400px);
}
@keyframes rollout {
0% { transform: translate3d(0, 300px, 0); }
100% { transform: translate3d(1000px, 300px, 0); }
}
@keyframes ballroll {
0% { transform: rotate(0); }
100% { transform: rotate(1000deg); }
}
.rollout {
width: 60px;
height: 60px;
animation: rollout 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
div {
animation: ballroll 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
}
JS動畫
有很多適合動畫的易於使用的JS鉤子。所有的鉤子都會傳入el參數,除了動畫鉤子(enter和leave)
還會傳入done作爲參數(它的作用就是告知Vue動畫結束)
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-Leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">
</transition>
從最基本的層面看,這是開始動畫和結束動畫所需的,包括相關的方法:
<transition
@enter="enterEl"
@leave="leaveEl"
:css="false">
<!-- put element here-->
</transition>
methods: {
enterEl(el, done) {
//entrance animation
done();
},
leaveEl(el, done) {
//exit animation
done();
},
}