VUE3 之 多個元素之間的過渡 - 這個系列的教程通俗易懂，適合新手

追風人聊Java發表於2022-03-12
Vue

1. 概述

老話說的好：過去不等於未來，過去成功了不代表將來也會成功，過去失敗了也不代表將來也會失敗。

 

言歸正傳，今天我們聊聊多個元素之間的過渡。

 

2. 多個元素之間的過渡

2.1 兩個元素交替顯示

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                show : false
            }
        },
        methods : {
            myClick() {
                this.show = !this.show;
            }
        },
        template:`
            <div class="center">
                <transition>
                    <div v-if="show"><h3>on</h3></div>
                    <div v-else="show"><h3>off</h3></div>
                </transition>
                <button @click="myClick">切換</button>
            </div>
        `
    });

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

 

 

 

 這個例子中，點選切換按鈕，兩個 div 元素會交替顯示，使用了我們之前學過的 v-if 和 v-else 的例子

 

2.2 增加過渡效果

    <style>
       /* 入場起始樣式 */
       .v-enter-from {
            opacity: 0;
        }
        /* 入場過渡效果 */
        .v-enter-active {
            transition: 2s opacity ease-in; 
        }
        /* 入場結束樣式 */
        .v-enter-to {
            opacity: 1;
        }

        /* 出場起始樣式 */
        .v-leave-from {
            opacity: 1;
        }
        /* 出場過渡效果 */
        .v-leave-active {
            transition: 2s opacity ease-in; 
        }
        /* 出場結束樣式 */
        .v-leave-to {
            opacity: 0;
        }
    </style>

 

 

 

 我們根據之前的知識增加入場、出場的過渡效果，但效果並不太好，兩個元素是同時渲染過渡效果的

 

2.3 增加模式

        template:`
            <div class="center">
                <transition mode="out-in">
                    <div v-if="show"><h3>on</h3></div>
                    <div v-else="show"><h3>off</h3></div>
                </transition>
                <button @click="myClick">切換</button>
            </div>
        `

 

 

 

 我們增加了 mode="out-in" 後，效果好多了，出場元素會先渲染，然後入場元素才渲染

 

2.4 點重新整理，元素也有過渡效果

        template:`
            <div class="center">
                <transition mode="out-in" appear>
                    <div v-if="show"><h3>on</h3></div>
                    <div v-else="show"><h3>off</h3></div>
                </transition>
                <button @click="myClick">切換</button>
            </div>
        `

 

我們在 transition 標籤上增加了 appear 屬性，此時點選重新整理，也有過渡效果 

 

3. 綜述

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

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

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

 

4. 個人公眾號

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

相關文章