Vue中JS動畫與Velocity.js的結合使用
更新時間：2019年02月13日 09:55:24 作者：UCCs
這篇文章主要介紹了Vue中JS動畫與Velocity.js的結合使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前面學習了用css實現動畫效果，那 Vue 中能不能用js實現動畫效果呢？
其實 Vue 提供了很多動畫鉤子
enter
入場動畫鉤子函數有before-enter、enter、after-enter
before-enter
動畫出現前的事件
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter" //動畫出現前的事件
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
},
handleBeforeEnter(el){ //接收一個參數 el，為 dom 元素
el.style.color = 'red'
}
}
})
enter
before-enter事件結束后執(zhí)行
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter" //before-enter 事件結束后執(zhí)行
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show:true
},
methods: {
handleClick(){
this.show = !this.show
},
handleBeforeEnter(el){
el.style.color = 'red'
}
handleEnter(el，done){ //接收兩個參數，第一個參數 el 為 dom 元素，第二個參數是 done 是個回調函數
setTimeout(()=>{
el.style.color = 'green'
done() //done 回調函數非常重要，在執(zhí)行完動畫后需手動執(zhí)行下這個函數，相當于告訴 Vue 這個動畫已經執(zhí)行完了，會再去調用 after-enter 事件
},2000)
}
}
})
after-enter
enter事件中done被調用后，after-enter事件會被觸發(fā)
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter" //enter 事件中 done 被調用后，after-enter 事件會被觸發(fā)
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show
},
handleBeforeEnter(el) {
el.style.color = 'red'
},
handleEnter(el, done) {
setTimeout(() => {
el.style.color = 'green'
done()
}, 2000)
},
handleAfterEnter(el) { //接收一個參數 el，為 dom 元素
setTimeout(()=>{
el.style.color = 'blue'
},2000)
}
}
})
leave
與入場動畫對應的出場動畫鉤子函數有before-leave、leave、after-leave。它們的用法與入場動畫用法一樣
Velocity.js庫
有了上面基礎后，配合Velocity.js庫，能實現更強大的動畫效果。
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter" //enter 事件中 done 被調用后，after-enter 事件會被觸發(fā)
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
let vm = new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show
},
handleBeforeEnter(el) {
el.style.opacity = 0
},
handleEnter(el, done) {
Velocity(el, { //第一個參數是要操作的 dom 元素
opacity: 1
}, {
duration: 1000, //第三參數中需要配置一個 complete 屬性，值為 done，因為 Velocity 執(zhí)行完后會自動執(zhí)行 complete 屬性，這里設置為 done 是讓它去觸發(fā) after-enter 事件
complete: done
})
},
handleAfterEnter(el) {
console.log('動畫結束')
}
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js+express利用切片實現大文件斷點續(xù)傳
斷點續(xù)傳就是要從文件已經下載的地方開始繼續(xù)下載，本文主要介紹了Vue.js+express利用切片實現大文件斷點續(xù)傳，具有一定的參考價值，感興趣的可以了解下2023-05-05
Element-ui?Layout布局(Row和Col組件)的實現
我們在實際開發(fā)中遇到一些布局的時候會用到Layout布局，本文就詳細的介紹了Element-ui?Layout布局(Row和Col組件)的實現，具有一定的參考價值，感興趣的可以了解一下2021-12-12
在本篇文章里小編給大家分享的是關于Vue.js watch監(jiān)視屬性的相關知識點內容，需要的朋友們學習下。2019-11-11
這篇文章主要為大家介紹了vitejs預構建理解及流程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue-create創(chuàng)建VUE3項目詳細圖文教程
create-vue是Vue官方新的腳手架工具,底層切換到了vite(下一代前端工具鏈),為開發(fā)提供極速響應,下面這篇文章主要給大家介紹了關于vue-create創(chuàng)建VUE3項目的相關資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了vue組件之間進行傳值的方法，文章圍繞主題展開詳細的內容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題
這篇文章主要介紹了解決VUE-npm ERR! C:\rj\node-v14.4.0-win-x64\nod問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue表格顯示字符串過長的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue基礎語法知識梳理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-12-12