VUE3 之 動畫與過渡的實現 - 這個系列的教程通俗易懂，適合新手

追風人聊Java發表於2022-02-18
Vue動畫

1. 概述

光環效應告訴我們：

當一個人在某一方面取得了巨大的成功，人們就會給他貼上正面的標籤，這個人從此就被“優秀”的光環所籠罩，他做的一切，人們都認為是正確的。

例如：越是名氣大的明星代言的商品，買的人就越多。

反之亦然，當一個人在某一方面失敗了，往往就會被貼上負面的標籤，從此被“失敗”的“光環”所籠罩，他做的一切，周圍人都認為是錯誤的。

例如：一個人第一次做生意就失敗了，則這個人再做什麼決策，他的朋友都認為是錯誤的。

因此，我們要理性判斷，不能被“光環”影響我們的判斷。

 

言歸正傳，今天我們來聊聊 VUE 的動畫與過渡。

 

2.動畫與過渡

2.1 基於 class 的動畫

    <style>
        /* 動畫 */
        @keyframes leftRight {
            0% {
                transform: translateX(0px);
            }
            33% {
                transform: translateX(-100px);
            }
            66% {
                transform: translateX(100px);
            }
            100% {
                transform: translateX(0px);
            }
        }

        .animation_leftRight {
            animation : leftRight 4s;
        }
        .center {
            text-align: center;
        }
    </style>

 

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                animate : {
                    animation_leftRight : false
                }
            }
        },
        methods : {
            handleClick() {
                this.animate.animation_leftRight = !this.animate.animation_leftRight;
            }
        },
        template:`
            <div class="center">
                <div :class="animate">hello world</div>
                <button @click="handleClick">左右移動</button>
            </div>
            
        `
    });
    const vm = app.mount("#myDiv");
</script>

 

 

 

 

 

 

 

這個例子中，我們讓 hello world 這段文字，在 4 秒鐘的時間裡，先向左移動，再向右移動，最後回到中間。

利用我們之前學的繫結 class 的方法，使用 :class="animate" 將 class 樣式與資料繫結，最終實現效果。

 

2.2 基於 class 的過渡

    <style>
        /* 過渡 */
        .transition {
            transition : 3s background-color ease;
        }

        .blue {
            background : blue;
        }

        .green {
            background : green;
        }
    </style>

 

    const app = Vue.createApp({
        data(){
            return {
                transition : {
                    transition : true,
                    blue : true,
                    green : false
                }
            }
        },
        methods : {
            handleClick() {
                this.transition.blue = !this.transition.blue;
                this.transition.green = !this.transition.green;
            }
        },
        template:`
            <div>
                <div :class="transition">hello world</div>
            </div>
            <button @click="handleClick">切換</button>
        `
    });

 

 

 

 該例中，我們將 hello world 的背景色，由藍色漸變成綠色，同樣是使用了 :class 繫結資料的方式。

 

2.3 過渡與 Style 的繫結

    const app = Vue.createApp({
        data(){
            return {
                styleObj : {
                    background : 'blue'
                }
            }
        },
        methods : {
            handleClick() {
                if(this.styleObj.background === 'blue') {
                    this.styleObj.background = 'green';
                } else {
                    this.styleObj.background = 'blue';
                }
                
            }
        },
        template:`
            <div>
                <div class="transition" :style="styleObj">hello world</div>
            </div>
            <button @click="handleClick">切換</button>
        `
    });

此例與上例的效果相同，只是使用 :style 的方式與資料繫結。

 

3. 綜述

今天聊了一下 VUE3 的 動畫與過渡的實現，希望可以對大家的工作有所幫助，下一節我們繼續講 Vue 中 動畫 的相關知識，敬請期待

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

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

 

4. 個人公眾號

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

相關文章