快捷導(dǎo)航

Vue3之使用js實(shí)現(xiàn)動(dòng)畫示例解析

更新時(shí)間：2023年04月04日 16:40:50 作者：時(shí)光劍客

這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

概述

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

實(shí)例解析

假設(shè)我們要實(shí)現(xiàn)一個(gè)效果：讓“hello world”的字體顏色在紅色和綠色之間一秒改變一次，5秒后結(jié)束，然后結(jié)束后彈出一個(gè)對(duì)話框，展示一段內(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實(shí)現(xiàn)動(dòng)畫</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();// 通知下一個(gè)函數(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標(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.

總結(jié)

以上就是使用js實(shí)現(xiàn)動(dòng)畫的內(nèi)容，本文只是簡(jiǎn)單的介紹了使用js做動(dòng)畫的基本知識(shí)，讀者可以去自己動(dòng)手實(shí)踐一下，體會(huì)一下使用CSS和js實(shí)現(xiàn)的動(dòng)畫的不同，并對(duì)比出他們使用的場(chǎng)景，然后歡迎大家在評(píng)論區(qū)交流，本文的目的也在于拋磚引玉，更多關(guān)于Vue3使用js實(shí)現(xiàn)動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: