黄色电影一区二区,韩国少妇自慰A片免费看,精品人妻少妇一级毛片免费蜜桃AV按摩师 ,超碰 香蕉

如何用JavaScript在Vue3中實現(xiàn)動畫

如何用JavaScript在Vue3中實現(xiàn)動畫

本文講解"怎么用JavaScript在Vue3中實現(xiàn)動畫"，希望能夠解決相關問題。

概述

動畫的實現(xiàn)其實不僅可以使用CSS的方式實現(xiàn)，而且還可以使用js的方式實現(xiàn)，二者有啥區(qū)別呢？CSS更加注重動畫的展現(xiàn)，性能更好，而js的方式性能稍微差點，但是可以在動畫執(zhí)行的每一個過程中做些額外的操作。也就是說動畫執(zhí)行的開始-執(zhí)行中-結束這個過程，如果使用CSS來做，最多也就是控制下動畫的屬性啥的，只是為了展示動畫。而使用js的方式，我們可以在動畫執(zhí)行開始時，操作dom元素，加我們想要的效果啥的，動畫執(zhí)行結束時我們可以做一些動畫結束的操作，比如彈個對話框啥的。這些使用js實現(xiàn) 都會比較方便。

實例解析

假設我們要實現(xiàn)一個效果：讓“hello world”的字體顏色在紅色和綠色之間一秒改變一次，5秒后結束，然后結束后彈出一個對話框，展示一段內(nèi)容，代碼如下：

 <html lang="en">     <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"" vue@next"="">


    


<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">
??????????????
hello?world?

??????????</transition>
??????????<button?@click="handleClick">switch</button>
????????`
????});
????const?vm?=?app.mount('#root');
</script>
</div?id="root"></script?src="https:></meta?name="viewport"?content="width=device-width,?initial-scale=1.0"></meta?http-equiv="x-ua-compatible"?content="ie=edge"></meta?charset="utf-8"></html?lang="en">

從上面的代碼中我們可以看到，在transition標簽中我們使用了:css = "false" 這是因為我們要使用js做動畫，所以要先禁用掉css，然后分別實現(xiàn)了@before-enter="handleBeforeEnter", @enter="handleEnterActive" ,@after-enter 分別對應動畫開始前，動畫執(zhí)行中，動畫執(zhí)行結束，而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三個函數(shù)是對應三個階段的js函數(shù)，我們可以在這幾個函數(shù)中執(zhí)行我們想要執(zhí)行的操作。在本例中：

handleBeforeEnter(el)
{
   el.style.color = 'red';
}

動畫執(zhí)行前我們將文本的顏色設置成紅色

當動畫執(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秒結束。

當動畫結束的時候

handleEnterEnd(){
     alert(123);
}

動畫結束后，會執(zhí)行handleEnterEnd，然后彈出一個對話框，顯示123.

關于 "怎么用JavaScript在Vue3中實現(xiàn)動畫" 就介紹到此。希望多多支持碩編程。

下一節(jié)：javascript標簽的下拉框怎么定位

JS 編程技術

相關文章