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

最新推荐文章于 2024-05-24 11:12:38 发布

追风人聊Java

最新推荐文章于 2024-05-24 11:12:38 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/u011181989/article/details/123603666

版权

前端专栏收录该内容

33 篇文章 3 订阅

订阅专栏

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

追风人聊Java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE3 之列表动画 - 这个系列的教程通俗易懂，适合自学

目录1. 概述2. 列表动画3. 综述4. 个人公众号1. 概述老话说的好：可以为别人解决痛点的产品就是好产品。言归正传，今天我们来聊聊 VUE 的列表动画。2. 列表动画2.1 列表中增加和删除元素<style> .my-item { display: inline-block; margin-right: 15px; }</style>&.
复制链接

扫一扫