VUE3 之 狀態動畫 - 這個系列的教程通俗易懂，適合新手

追風人聊Java發表於2022-03-20
Vue動畫

1. 概述

老話說的好：不用羨慕別人，每個人都有屬於自己的人生道路，重要的是在前進道路上遇見阻礙時，如何去積極的面對並解決。

 

言歸正傳，今天我們來聊聊 VUE 的狀態動畫。

 

2. 狀態動畫

2.1 數字加10的例子 

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                num : 0
            }
        },
        methods : {
            myAdd() {
                this.num += 10;
            }
        },
        template:`
            <div>
                <button @click="myAdd">加10</button>
                <div>{{num}}</div>
            </div>
        `
    });
    const vm = app.mount("#myDiv");

 

 

 

 這個例子中，我們每點一次按鈕，就會讓數字加10，此時顯示的數字會直接變成下一個數字，沒有動畫效果，下面我們加上一些動畫效果

 

2.2  增加動畫效果

    const app = Vue.createApp({
        data(){
            return {
                num : 0,
                animateNum : 0
            }
        },
        methods : {
            myAdd() {
                this.num += 10;
                const myInterval = setInterval(() => {
                    this.animateNum += 1;
                    if(this.animateNum === this.num) {
                        clearInterval(myInterval);
                    }
                }, 100);
            },
        },
        template:`
            <div>
                <button @click="myAdd">加10</button>
                <div>{{animateNum}}</div>
            </div>
        `
    });

    const vm = app.mount("#myDiv");

這裡我們手寫了一個動畫效果，當數字變化時，會每次加1的變化，直到加到10停止

原理很簡單，我們再定義一個變數 animateNum，這個變數每100毫秒加1，直到等於本次的結果時停止，然後渲染時渲染的是 animateNum，這樣就有了動畫效果

但這個例子有個缺陷，當快速點加10按鈕時，數字會一直增加，停不下來，我們來優化一下

 

2.3 優化

    let flag = 0;

    const app = Vue.createApp({
        data(){
            return {
                num : 0,
                animateNum : 0
            }
        },
        methods : {
            myAdd() {
                if(flag === 1) {
                    return;
                }
                flag = 1;
                this.num += 10;
                const myInterval = setInterval(() => {
                    this.animateNum += 1;
                    if(this.animateNum === this.num) {
                        clearInterval(myInterval);
                        flag = 0;
                    }
                }, 100);
            },
        },
        template:`
            <div>
                <button @click="myAdd">加10</button>
                <div>{{animateNum}}</div>
            </div>
        `
    });

    const vm = app.mount("#myDiv");

這裡我們用了一個小把戲，宣告瞭一個全域性變數 flag，當點選按鈕時，判斷 flag 是否是 0，如果不是 0，則 return，如果是 0，則把 flag 置為 1，繼續執行，直到執行完，再把 flag置為 0。

這樣我們在動畫過程中，點選多少次按鈕，都沒有關係了。

  

3. 綜述

今天聊了一下 VUE3 的 狀態動畫，希望可以對大家的工作有所幫助，下一節我們開始講 Vue 中的高階語法，敬請期待

歡迎幫忙點贊、評論、轉發、加關注 ：）

關注追風人聊Java，這裡乾貨滿滿，都是實戰類技術文章，通俗易懂，輕鬆上手。

 

4. 個人公眾號

追風人聊Java，歡迎大家關注

相關文章