過渡與動畫(animate.css庫、動畫原理)
阿新 • • 發佈:2018-12-10
## 一、使用animate.css庫 ##
Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果。
- 在 CSS 過渡和動畫中自動應用 class
- 可以配合使用第三方 CSS 動畫庫,如 Animate.css
- 在過渡鉤子函式中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 動畫庫,如 Velocity.js
引用animate.css
<link rel="stylesheet" type="text/css" href="../animate.css">
可自定義enter-active的名字
<div id="root">
<transition name="fade" appear enter-active-class="animated swing" appear-active-class="animated swing" leave-active-class="animated shake">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div >
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show=!this.show
}
}
})
二、vue動畫效果
在進入/離開的過渡中,會有 6 個 class 切換。
v-enter:定義進入過渡的開始狀態。在元素被插入之前生效,在元素被插入之後的下一幀移除。
v-enter-to: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 v-enter 被移除),在過渡/動畫完成之後移除。
v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效,下一幀被移除。
v-leave-active:定義離開過渡生效時的狀態。在整個離開過渡的階段中應用,在離開過渡被觸發時立刻生效,在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間,延遲和曲線函式。
v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 v-leave 被刪除),在過渡/動畫完成之後移除。
vue過渡效果
<style>
/* 如果transition沒有name 則為v-enter*/
.fade-enter,.fade-leave-to{
opacity: 0;
}
.fade-enter-active,.fade-leave-active{
transition: opacity 3s;
}
</style>