您好,登錄后才能下訂單哦!
前面學習了用css實現(xiàn)動畫效果,那 Vue 中能不能用js實現(xiàn)動畫效果呢?
其實 Vue 提供了很多動畫鉤子
enter
入場動畫鉤子函數(shù)有before-enter、enter、after-enter
before-enter
動畫出現(xiàn)前的事件
<div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" //動畫出現(xiàn)前的事件 > <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){ //接收一個參數(shù) el,為 dom 元素 el.style.color = 'red' } } })
enter
before-enter事件結(jié)束后執(zhí)行
<div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" //before-enter 事件結(jié)束后執(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){ //接收兩個參數(shù),第一個參數(shù) el 為 dom 元素,第二個參數(shù)是 done 是個回調(diào)函數(shù) setTimeout(()=>{ el.style.color = 'green' done() //done 回調(diào)函數(shù)非常重要,在執(zhí)行完動畫后需手動執(zhí)行下這個函數(shù),相當于告訴 Vue 這個動畫已經(jīng)執(zhí)行完了,會再去調(diào)用 after-enter 事件 },2000) } } })
after-enter
enter事件中done被調(diào)用后,after-enter事件會被觸發(fā)
<div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" //enter 事件中 done 被調(diào)用后,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) { //接收一個參數(shù) el,為 dom 元素 setTimeout(()=>{ el.style.color = 'blue' },2000) } } })
leave
與入場動畫對應的出場動畫鉤子函數(shù)有before-leave、leave、after-leave。它們的用法與入場動畫用法一樣
Velocity.js庫
有了上面基礎后,配合Velocity.js庫,能實現(xiàn)更強大的動畫效果。
<div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" //enter 事件中 done 被調(diào)用后,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, { //第一個參數(shù)是要操作的 dom 元素 opacity: 1 }, { duration: 1000, //第三參數(shù)中需要配置一個 complete 屬性,值為 done,因為 Velocity 執(zhí)行完后會自動執(zhí)行 complete 屬性,這里設置為 done 是讓它去觸發(fā) after-enter 事件 complete: done }) }, handleAfterEnter(el) { console.log('動畫結(jié)束') } } })
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。