Vue动画篇（四）——列表动画

最新推荐文章于 2024-05-07 19:22:11 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-05-07 19:22:11 发布

阅读量368

点赞数

分类专栏： Vue.js 文章标签： vue 列表 vue.js 前端

本文链接：https://blog.csdn.net/qq_39055970/article/details/106388217

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Vue动画篇（四）——列表动画

列表动画

列表动画

按理说，其实列表动画没必要单独拿出来写一篇文章。但是使用Vue写列表动画有几个注意点必须注意，否则动画可能会失效。

列表添加功能动画实例

这是一个简单的列表，只有一个简单的添加数据的功能，动画部分是每次添加数据时，新出现的数据都会以动画的形式出现。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            border: 1px dashed gray;
            padding: 5px;
            margin-bottom: 10px;
        }

        li:hover {
            background-color: pink;
            transition: all 0.4s ease;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(100px);
        }

        .v-enter-active,
        .v-leave-to {
            transition: all 0.6s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="id">
        <input type="text" v-model="name">
        <button @click="add">添加</button>
        <ul>
            <transition-group>
                <li v-for="item in list" :key="item.id">
                    {{item.id}}-------{{item.name}}
                </li>
            </transition-group>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [{
                        id: 1,
                        name: "李白"
                    },
                    {
                        id: 2,
                        name: "杜甫"
                    },
                    {
                        id: 3,
                        name: "李商隐"
                    },
                    {
                        id: 4,
                        name: "杜牧"
                    },
                ]
            },
            methods: {
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name
                    });
                    this.id = "";
                    this.name = "";
                }
            }
        });
    </script>
</body>

</html>

注意事项

（1）在实现列表过渡的时候，需要过度的元素，是通过v-for循环渲染出来的，不能使用 transition 包裹，需要使用transitionGroup
（2）如果要为v-for循环出来的元素设置动画，必须为每一个元素设置 :key 属性
（3）最后要定义这两组类

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateY(100px);
}

.v-enter-active,
.v-leave-to {
    transition: all 0.6s ease;
}

列表删除功能动画实例

承接上个例子，增加了列表删除功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            border: 1px dashed gray;
            padding: 5px;
            margin-bottom: 10px;
            width: 100%;
        }

        li:hover {
            background-color: pink;
            transition: all 0.4s ease;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(100px);
        }

        .v-enter-active,
        .v-leave-to {
            transition: all 0.6s ease;
        }

        /* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
        .v-move {
            transition: all 0.6s ease;
        }

        .v-leave-to {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="id">
        <input type="text" v-model="name">
        <button @click="add">添加</button>
        <!-- <ul> -->
        <!-- 给 transition-group 添加appear属性，实现页面刚出来时候的入场效果 -->
        <!-- 通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，
                如果指定tag属性，默认，渲染为span标签 -->
        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="remove(i)">
                {{item.id}}-------{{item.name}}
            </li>
        </transition-group>
        <!-- </ul> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [{
                        id: 1,
                        name: "李白"
                    },
                    {
                        id: 2,
                        name: "杜甫"
                    },
                    {
                        id: 3,
                        name: "李商隐"
                    },
                    {
                        id: 4,
                        name: "杜牧"
                    },
                ]
            },
            methods: {
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name
                    });
                    this.id = "";
                    this.name = "";
                },
                remove(i) {
                    this.list.splice(i, 1);
                }
            }
        });
    </script>
</body>

</html>

注意事项

（1）v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果
（2）给 transition-group 添加appear属性，实现页面刚出来时候的入场效果
（3）通过为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果指定tag属性，默认，渲染为span标签

Sheldon一蓑烟雨任平生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue动画篇（四）——列表动画

Vue动画篇（四）——列表动画列表动画列表添加功能动画实例注意事项列表删除功能动画实例注意事项列表动画按理说，其实列表动画没必要单独拿出来写一篇文章。但是使用Vue写列表动画有几个注意点必须注意，否则动画可能会失效。列表添加功能动画实例这是一个简单的列表，只有一个简单的添加数据的功能，动画部分是每次添加数据时，新出现的数据都会以动画的形式出现。<!DOCTYPE html><html lang="en"><head> <meta charse
复制链接

扫一扫