VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手

  • Z时代
  • 2024-01-10
  • 分类：综合

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，欢迎大家关注

以上是 VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手 的全部内容， 来源链接： utcz.com/z/380988.html

回到顶部