您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何用JavaScript在Vue3中實現(xiàn)動畫的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇如何用JavaScript在Vue3中實現(xiàn)動畫文章都會有所收獲,下面我們一起來看看吧。
動畫的實現(xiàn)其實不僅可以使用CSS的方式實現(xiàn),而且還可以使用js的方式實現(xiàn),二者有啥區(qū)別呢?CSS更加注重動畫的展現(xiàn),性能更好,而js的方式性能稍微差點,但是可以在動畫執(zhí)行的每一個過程中做些額外的操作。也就是說動畫執(zhí)行的開始-執(zhí)行中-結(jié)束這個過程,如果使用CSS來做,最多也就是控制下動畫的屬性啥的,只是為了展示動畫。而使用js的方式,我們可以在動畫執(zhí)行開始時,操作dom元素,加我們想要的效果啥的,動畫執(zhí)行結(jié)束時我們可以做一些動畫結(jié)束的操作,比如彈個對話框啥的。這些使用js實現(xiàn) 都會比較方便。
假設(shè)我們要實現(xiàn)一個效果:讓“hello world”的字體顏色在紅色和綠色之間一秒改變一次,5秒后結(jié)束,然后結(jié)束后彈出一個對話框,展示一段內(nèi)容,代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用JS實現(xiàn)動畫</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data() { return { show:false } }, methods: { handleClick(){ this.show = !this.show; }, handleBeforeEnter(el){ el.style.color = 'red'; }, handleEnterActive(el, done){ const animation = setInterval(() => { const color = el.style.color; if(color === 'red'){ el.style.color = 'green'; }else{ el.style.color = 'red'; } },1000); setTimeout(() =>{ clearInterval(animation); done();// 通知下一個函數(shù)的執(zhí)行 },5000); }, handleEnterEnd(){ alert(123); } }, template: ` <transition :css="false" @before-enter="handleBeforeEnter" @enter="handleEnterActive" @after-enter="handleEnterEnd"> <div v-if="show" >hello world </div> </transition> <button @click="handleClick">switch</button> ` }); const vm = app.mount('#root'); </script> </html>
從上面的代碼中我們可以看到,在transition標簽中我們使用了:css = "false"
這是因為我們要使用js做動畫,所以要先禁用掉css,然后分別實現(xiàn)了@before-enter="handleBeforeEnter"
, @enter="handleEnterActive"
,@after-enter
分別對應(yīng)動畫開始前,動畫執(zhí)行中,動畫執(zhí)行結(jié)束,而后面的handleBeforeEnter
,handleEnterActive
,handleEnterEnd
三個函數(shù)是對應(yīng)三個階段的js函數(shù),我們可以在這幾個函數(shù)中執(zhí)行我們想要執(zhí)行的操作。在本例中:
handleBeforeEnter(el) { el.style.color = 'red'; }
動畫執(zhí)行前我們將文本的顏色設(shè)置成紅色
當動畫執(zhí)行的時候
handleEnterActive(el, done){ const animation = setInterval(() => { const color = el.style.color; if(color === 'red'){ el.style.color = 'green'; }else{ el.style.color = 'red'; } },1000); setTimeout(() =>{ clearInterval(animation); done();// 通知下一個函數(shù)的執(zhí)行 },5000); }
動畫執(zhí)行的時候,我們隔1秒去判斷當前文本的顏色,如果是紅色,則改成綠色,如果是綠色則改成紅色,然后持續(xù)5秒結(jié)束。
當動畫結(jié)束的時候
handleEnterEnd(){ alert(123); }
動畫結(jié)束后,會執(zhí)行handleEnterEnd
,然后彈出一個對話框,顯示123.
關(guān)于“如何用JavaScript在Vue3中實現(xiàn)動畫”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“如何用JavaScript在Vue3中實現(xiàn)動畫”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。