hide show vue 动画_Vue2.x学习四：过渡动画
Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。
請注意它的應用場景
并不是說我們寫了一個動畫之后讓它一直在動，而是在一個模塊顯示或隱藏的時候去做一種特效，使得它的過程有過渡性，而不是很突兀的直接消失或顯示。
它適用的場景是v-if和v-show，動態組件，組件根節點。
具體實現有以下幾種方式：
1)在 CSS 過渡和動畫中自動應用 class
2)可以配合使用第三方 CSS 動畫庫，如 Animate.css
3)在過渡鉤子函數中使用 JavaScript 直接操作 DOM
4)可以配合使用第三方 JavaScript 動畫庫，如 Velocity.js
下面我們通過一個例子來學習：
顯示
隱藏
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
//定義它是否顯示，默認情況下為false隱藏
isShow:false,
},
//在其中定義顯示與隱藏兩個方法
methods:{
// 要想動態的實現顯示與隱藏，我們只要動態的改變isShow的狀態
show(){
this.isShow=true;//當isShow為真，顯示
},
hide(){
this.isShow=false;//當isShow為假，隱藏
}
}
});
它還有一種簡便寫法
切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
我們可以看到，上面顯示與隱藏的方式過于直接，此時我們可以為它創建動畫效果。
css過渡
隱藏與顯示的效果實現之后，我們來創建動畫。
哪個部分要動態的顯示與隱藏，我們給哪個部分加。
然后我們為它加特效。
加特效之前我們要知道，元素從開始顯示到完全顯示，開始隱藏到完全隱藏也要經歷一些階段，我們可以在這之中加入一些樣式，就能達到一些效果。
我們可以通過一張圖來說明：
v-enter：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之后的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to: 定義進入過渡的結束狀態。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成之后移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to: 定義離開過渡的結束狀態。在離開過渡被觸發之后下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成之后移除。
animate/*開始顯示*/
.v-enter{ opacity: 0; }
/*顯示過程*/
.v-enter-active{ transition: opacity 1.5s;/*給transition加過渡特效(屬性),持續時間為1.5秒*/ }
/*顯示完畢*/
.v-enter-to{ opacity: 1; }
/*開始隱藏*/
.v-leave{ opacity: 1; }
/*隱藏過程*/
.v-leave-active{ transition: opacity 1.5s; }
/*隱藏完畢*/
.v-leave-to{ opacity: 0; }
切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
css動畫
相當于將css中的動畫機制運用到vue中
animate/*只在顯示與隱藏的過程中定義動畫,實現過渡效果*/
.v-enter-active {
animation-name: app;/*指定動畫名稱*/
animation-duration: 3s;/*定義時間*/
}
.v-leave-active {
animation-name: app;
animation-duration: 3s;
animation-direction: reverse;/*動畫反向播放*/
}
/*定義動畫效果*/
@keyframes app {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
我們有的時候可能不太能寫好keyframes，這個時候我們可以引用別人封裝好的動畫庫，那么我們自己就不用寫keyframes了。
下面我們來看看如何在vue中引入animate.css動畫庫。
css動畫庫
上面兩種方式，我們只是為特效元素添加transition標簽包裹，
而這種動畫庫的實現方式，我們需要為transition標簽添加屬性
vue中為我們提供了6個標簽：
enter-class、enter-active-class、enter-to-class
leave-class、leave-active-class、leave-to-class
他們的優先級高于普通的類名，這對于 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。
animate切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
js動畫庫
這里我們用到了JavaScript 鉤子。
它有以下幾種鉤子：
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
要顯示的內容用法是在transition綁定函數，并在methods中定義
methods: {
// 進入
beforeEnter: function (el) {
// ...
},
// 此回調函數是可選項的設置
// 與 CSS 結合時使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// 離開
beforeLeave: function (el) {
// ...
},
// 此回調函數是可選項的設置
// 與 CSS 結合時使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
實現動畫的方式有2種，一種是jquery，一種是velocity。
此處我們以velocity為例
animate切換
{{msg}}
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
},
methods:{
// 事件由vue來調用,它會給我們傳兩個參數:el(當前元素),done(函數執行完之后的回調)
enter(el,done){
//console.log(el);//[object HTMLDivElement]
//console.log(done);//function () {...}
/*
Velocity(要控制的元素,{動畫樣式},{動畫配置})
動畫樣式,可以在http://www.mrfront.com/docs/velocity.js/plugins.html內置特效中尋找
*/
Velocity(el,"transition.fadeIn",{
// 動畫配置項
duration:1000, //動畫執行時間(單位毫秒)
complete:done // 動畫結束時的回調函數,必須要寫
/*其他參數
easing: "swing", // 緩動效果
queue: "", // 隊列
begin: undefined, // 動畫開始時的回調函數
progress: undefined, // 動畫執行中的回調函數(該函數會隨著動畫執行被不斷觸發)
display: undefined, // 動畫結束時設置元素的 css display 屬性
visibility: undefined, // 動畫結束時設置元素的 css visibility 屬性
loop: false, // 循環
delay: false, // 延遲
mobileHA: true // 移動端硬件加速(默認開啟)
*/
});
}
}
});
總結
以上是生活随笔為你收集整理的hide show vue 动画_Vue2.x学习四：过渡动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git ssh创建分支_【ssh简单版g
- 下一篇： python漏洞检测脚本_URL重定向漏