vue transition-group列表渲染动画-----v-for动态渲染的列表标签只能用transition-group，并且要渲染的每个元素都要加v-bind=“item里面的属性“

最新推荐文章于 2024-04-02 13:33:28 发布

天马行空zqzq

最新推荐文章于 2024-04-02 13:33:28 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107335490

版权

arppear 和 tag属性

arppear ：给列表加上入场动画

加上arppear之后会给ul标签里面加上一个 span标签，不符合标准，为了把它去掉，加上tag属性，指明执行动画的元素时ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        li {
            border: 1px dashed #ccc;
            height: 40px;
            width: 100%;
            line-height: 40px;
            padding-left: 10px;
            list-style: none;
        }
        li:hover {
            background-color: hotpink;
            transition: all 1s ease
        }
        /* 动画 */
        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateY(80px)
        }
        .v-enter-active, .v-leave-active {
            transition: all 1s ease
        }
       
        /* 能够实现删除一个列表元素后其他列表元素渐渐飘上来的效果 */
        .v-move {
            transition: all .8s ease
        }
        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>
            id：
            <input type="text" v-model="id">
        </label>
        <label>
            name：
            <input type="text" v-model="name">
        </label>
        <button v-on:click="add()">添加</button>
        <!-- <ul> -->
            <!-- 动态渲染出来的列表必须用 transition-group 标签 -->
            <!-- 并且每个渲染出来的必须要绑定一个 key 它的值必须是item里面的属性  -->
            <!-- 加一个appear属性可以给这个表格加一个入场动画，但是这样会默认在ul里面加一个span标签
            不符合标准，所以要在加一个tag属性，指明ul -->
            <transition-group appear tag="ul">
                <li v-for="(item, index) in list" v-bind:key="item.id" v-on:click="remove(index)">
                    {{ item.id }}-----{{ item.name }} 
                </li>
            </transition-group>
        <!-- </ul> -->
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                list: [
                    {
                        id: 1,
                        name: '秦桧'
                    },
                    {
                        id: 2,
                        name: '赵高'
                    },
                    {
                        id: 3,
                        name: '李斯'
                    },
                    {
                        id: 4,
                        name: '韩非'
                    }
                ]
            },
            methods: {
                add: function () {
                    this.list.push({id: this.id, name: this.name})
                },
                remove: function (index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>

天马行空zqzq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue transition-group列表渲染动画-----v-for动态渲染的列表标签只能用transition-group，并且要渲染的每个元素都要加v-bind=“item里面的属性“

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/vue.js"></scr.
复制链接

扫一扫