vue動畫筆記

GitChat 發布于2019-08-30 15:44 / 2320人閱讀

摘要：也可以使用放置模態窗的切換狀態過渡部分結構動畫所有有趣的動畫都是基于和可以給每一個實例一個特殊類動畫部分結構對于反彈對畫，如果使用的話，需要設置大量關鍵幀，動畫有很多適合動畫的易于使用的鉤子。

背景
內置的和組件同時支持CSS和JS鉤子
過渡和動畫的不同：
過渡就是從一個狀態向另一個狀態插入值（從起始狀態，到結束狀態，再回來）
動畫不同，可以在一個聲明中設置多個狀態（比如動畫50%的位置設置一個關鍵幀，
然后在70%的位置，也可以設置延遲屬性實現復雜運動）
CSS過渡
假設有一個簡單的模態窗。通過點擊按鈕顯示或隱藏模態窗。可以這樣做：
創建一個按鈕的vue實例，在實例中創建一個子組件，設置數據的狀態
這樣可以通過切換布爾值并添加事件處理實現子組件的顯示及隱藏。
可以使用v-if或者v-show來切換組件的可見性。也可以使用slot放置模態窗的切換狀態
過渡部分結構:

.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"
動畫部分結構:

name="ballmove"
enter-active-class="bouncein"
leave-active-class="rollout">

對于反彈對畫，如果使用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動畫結束）
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"

@before-Leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">

從最基本的層面看，這是開始動畫和結束動畫所需的，包括相關的方法：
@enter="enterEl"
@leave="leaveEl"
:css="false">

methods: {
enterEl(el, done) {

 //entrance animation
 done();

},
leaveEl(el, done) {

//exit animation
done();

},
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116198.html

vue動畫筆記

摘要：也可以使用放置模態窗的切換狀態過渡部分結構動畫所有有趣的動畫都是基于和可以給每一個實例一個特殊類動畫部分結構對于反彈對畫，如果使用的話，需要設置大量關鍵幀，動畫有很多適合動畫的易于使用的鉤子。背景內置的和組件同時支持CSS和JS鉤子過渡和動畫的不同：過渡就是從一個狀態向另一個狀態插入值（從起始狀態，到結束狀態，再回來）動畫不同，可以在一個聲明中設置多個狀態（比如動畫50%的位置設置一...

cloud 2019-08-26 10:39 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

klivitamJ 2019-08-30 13:48 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

Pines_Cheng 2019-08-21 17:08 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

ideaa 2019-08-01 17:48 評論0 收藏0
vue學習筆記（四）

摘要：提供了兩種向組件傳遞參數的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡介我們經常使用vue開發單頁面應用程序（SPA）。在開發SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...

frank_fun 2019-08-21 17:16 評論0 收藏0