Vue2.x學習四：過渡&動畫
Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果。javascript
請注意它的應用場景
並非說咱們寫了一個動畫以後讓它一直在動，而是在一個模塊顯示或隱藏的時候去作一種特效，使得它的過程有過渡性，而不是很突兀的直接消失或顯示。
它適用的場景是v-if和v-show，動態組件，組件根節點。css
具體實現有如下幾種方式：
1）在 CSS 過渡和動畫中自動應用 class
2）能夠配合使用第三方 CSS 動畫庫，如 Animate.css
3）在過渡鉤子函數中使用 JavaScript 直接操做 DOM
4）能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.jshtml
下面咱們經過一個例子來學習：vue
<body>
<div class="container">
<!-- 爲按鈕綁定事件 -->
<button @click="show">顯示</button>
<button @click="hide">隱藏</button>
<!-- 在vue中實現動態的顯示與隱藏 -->
<!-- v-if和v-show均可以，二者是有區別的
v-show：當咱們點擊隱藏時，下面的div.block還在，只是它的display爲none
v-if:當咱們點擊隱藏時，下面的div.block整個都沒有了，說明它從咱們的dom文檔結構中去掉了，
當咱們顯示時，它還會再建立一個dom元素插進去
由此咱們能夠比較v-if和v-show的效率：
若是這個東西要頻繁的顯示隱藏，那麼咱們選擇v-show，這樣能夠減小建立一個dom的代價
若是二者切換的頻度比較低(好比登錄註冊)，那麼咱們選擇v-if
-->
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
//定義它是否顯示，默認狀況下爲false隱藏
isShow:false,
},
//在其中定義顯示與隱藏兩個方法
methods:{
// 要想動態的實現顯示與隱藏，咱們只要動態的改變isShow的狀態
show(){
this.isShow=true;//當isShow爲真，顯示
},
hide(){
this.isShow=false;//當isShow爲假，隱藏
}
}
});
</script>
</body>
它還有一種簡便寫法java
<body>
<div class="container">
<!--
isShow=!isShow 新值是老值的取反,即
若是isShow爲true,那麼再次點擊的時候isShow爲false
這種較爲簡單不須要寫函數
-->
<button @click="isShow=!isShow">切換</button>
<!-- 爲須要動畫特效的部分加transition標籤 -->
<transition>
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
咱們能夠看到，上面顯示與隱藏的方式過於直接，此時咱們能夠爲它建立動畫效果。jquery
css過渡
隱藏與顯示的效果實現以後，咱們來建立動畫。
哪一個部分要動態的顯示與隱藏，咱們給哪一個部分加<transition></transition>。
而後咱們爲它加特效。git
加特效以前咱們要知道，元素從開始顯示到徹底顯示，開始隱藏到徹底隱藏也要經歷一些階段，咱們能夠在這之中加入一些樣式，就能達到一些效果。
咱們能夠經過一張圖來講明：
github
v-enter：定義進入過渡的開始狀態。在元素被插入以前生效，在元素被插入以後的下一幀移除。
v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入以前生效，在過渡/動畫完成以後移除。這個類能夠被用來定義進入過渡的過程時間，延遲和曲線函數。
v-enter-to: 定義進入過渡的結束狀態。在元素被插入以後下一幀生效 (與此同時 v-enter 被移除)，在過渡/動畫完成以後移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時馬上生效，下一幀被移除。
v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時馬上生效，在過渡/動畫完成以後移除。這個類能夠被用來定義離開過渡的過程時間，延遲和曲線函數。
v-leave-to: 定義離開過渡的結束狀態。在離開過渡被觸發以後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成以後移除。app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<!-- 爲顯示和隱藏的過程提供樣式定義 -->
<style type="text/css">
/*開始顯示*/
.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; }
</style>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切換</button>
<!-- 爲須要動畫特效的部分加transition標籤 -->
<transition>
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
</html>
css動畫
至關於將css中的動畫機制運用到vue中dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<style type="text/css">
/*只在顯示與隱藏的過程當中定義動畫,實現過渡效果*/
.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);
}
}
</style>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切換</button>
<!-- 爲須要動畫特效的部分加transition標籤 -->
<transition>
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
</html>
咱們有的時候可能不太能寫好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 結合使用十分有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切換</button>
<!--
在transition標籤中添加屬性
enter-active-class="animated bounceIn":自定義過渡類名="animated(基礎樣式) css庫中已有樣式"
Animate.css官網:https://daneden.github.io/animate.css/
-->
<transition enter-active-class="animated bounceIn" leave-active-class="animated fadeOut">
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
</html>
js動畫庫
這裏咱們用到了JavaScript 鉤子。
它有如下幾種鉤子：
<transition 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" > <div>要顯示的內容</div> </transition>
用法是在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爲例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 如下兩個是js動畫庫 velocity
velocity.js:提供動畫機制
velocity.ui,js:提供動畫組件
-->
<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.ui.min.js"></script>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切換</button>
<!-- 爲transition綁定事件 -->
<transition @enter="enter">
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
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 // 移動端硬件加速（默認開啓）
*/
});
}
}
});
</script>
</body>
</html>
相關文章
- 1. Android過渡動畫學習
- 2. VUE2 第五天學習--過渡效果
- 3. Vue 學習11——Vue過渡與動畫
- 4. ☀【動畫】過渡 transition
- 5. vue 過渡 動畫
- 6. Activity過渡動畫
- 7. css3動畫過渡
- 8. vue-過渡動畫
- 9. vue_過渡_動畫
- 10. React 過渡 動畫
- 更多相關文章...
- • jQuery Mobile 過渡 - jQuery Mobile 教程
- • ionic 加載動畫 - ionic 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Android過渡動畫學習
- 2. VUE2 第五天學習--過渡效果
- 3. Vue 學習11——Vue過渡與動畫
- 4. ☀【動畫】過渡 transition
- 5. vue 過渡 動畫
- 6. Activity過渡動畫
- 7. css3動畫過渡
- 8. vue-過渡動畫
- 9. vue_過渡_動畫
- 10. React 過渡 動畫