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

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

1. 概述

老話說的好：可以為別人解決痛點的產品就是好產品。

 

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

 

2. 列表動畫

2.1  列表中增加和刪除元素

<style>
       .my-item {
            display: inline-block;
            margin-right: 15px;
       }
</style>

 

<body>
    <div id="myDiv"></div>
</body>
<script>

    const app = Vue.createApp({
        data(){
            return {
                list : [3,2,1]
            }
        },
        methods : {
            myAdd() {
                this.list.unshift(this.list.length + 1);
            },
            myRemove() {
                this.list.shift();
            }
        },
        template:`
            <div>
                <button @click="myAdd">插入</button> &nbsp;
                <button @click="myRemove">移除</button><br>
                <span class="my-item" v-for="item in list" :key="item">{{item}}</span>
            </div>
        `
    });

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

 

 這個例子，實現了列表元素的增加和移除，沒有加入動畫，下面我們加上動畫效果

 

2.2 增加動畫效果

<style>
       .my-item {
            display: inline-block;
            margin-right: 15px;
       }
       /* 入場起始樣式 */
       .v-enter-from {
            opacity: 0;
            transform: translateY(30px);
        }
        /* 入場過渡效果 */
        .v-enter-active {
            transition: 1s all ease; 
        }
        /* 入場結束樣式 */
        .v-enter-to {
            opacity: 1;
        }
        /* 出場起始樣式 */
        .v-leave-from {
            opacity: 1;
        }
        /* 出場過渡效果 */
        .v-leave-active {
            transition: 1s all ease; 
            position: absolute;
        }
        /* 出場結束樣式 */
        .v-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }

</style>

 

        template:`
            <div>
                <button @click="myAdd">插入</button> &nbsp;
                <button @click="myRemove">移除</button><br>
                <transition-group>
                    <span class="my-item" v-for="item in list" :key="item">{{item}}</span>
                </transition-group>
            </div>
        `

 

 我們給列表元素增加了 transition-group 標籤，然後再根據之前的知識，加上入場、出場動畫，此時插入、移除元素，就有了相應的動畫效果

 

2.3 列表移動過渡 

有了入場、出場動畫，但細心一點我們就會發現，元素的移動是沒有動畫的，比較生硬，列表的移動也可以新增動畫，下面我們來加一下

        .v-move {
            transition: 1s all ease; 
        }

我們再加個 v-move 的樣式，列表過渡就有了，沒有那麼生硬了

 

3. 綜述

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

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

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

 

4. 個人公眾號

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

相關文章