如何用JavaScript在Vue3中實(shí)現(xiàn)動(dòng)畫

從上面的代碼中我們可以看到，在transition標(biāo)簽中我們使用了:css = "false" 這是因?yàn)槲覀円褂胘s做動(dòng)畫，所以要先禁用掉css，然后分別實(shí)現(xiàn)了@before-enter="handleBeforeEnter", @enter="handleEnterActive" ,@after-enter 分別對(duì)應(yīng)動(dòng)畫開始前，動(dòng)畫執(zhí)行中，動(dòng)畫執(zhí)行結(jié)束，而后面的handleBeforeEnter,handleEnterActive,handleEnterEnd三個(gè)函數(shù)是對(duì)應(yīng)三個(gè)階段的js函數(shù)，我們可以在這幾個(gè)函數(shù)中執(zhí)行我們想要執(zhí)行的操作。在本例中：

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

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

當(dāng)動(dòng)畫執(zhí)行的時(shí)候

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();// 通知下一個(gè)函數(shù)的執(zhí)行
                },5000);
            }

動(dòng)畫執(zhí)行的時(shí)候，我們隔1秒去判斷當(dāng)前文本的顏色，如果是紅色，則改成綠色，如果是綠色則改成紅色，然后持續(xù)5秒結(jié)束。

當(dāng)動(dòng)畫結(jié)束的時(shí)候

handleEnterEnd(){
     alert(123);
}

動(dòng)畫結(jié)束后，會(huì)執(zhí)行handleEnterEnd，然后彈出一個(gè)對(duì)話框，顯示123.

關(guān)于“如何用JavaScript在Vue3中實(shí)現(xiàn)動(dòng)畫”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“如何用JavaScript在Vue3中實(shí)現(xiàn)動(dòng)畫”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。