Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

<div id="app">
    <transition-group>
            <div v-for="item of list" :key="item.id">{{item.name}}</div>
    </transition-group>
    <button @click="add">add</button>
</div>

        Vue实例方法

    var app=new Vue({
        el:"#app",
        data:{
            id:0,
            list:[]
        },
        methods:{
            add:function(){
                this.list.push(
                    {
                        id:this.id++,
                        name:"hello Workd"
                    }
                )
            }
        }
    })

    我们需要给循环的元素绑定一个key,否则我们说过前面多元素的时候,会出现dom复用,不能有动画效果!因此绑定一个唯一的key!使用add按钮,每一项都有一个过渡效果!

            那么他的实现原理是什么?我们来看一下!

         相当于是一个组循环的每一项是一个单独的transition组件,每个组合有相同动画状态的class,设置css样式就行

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券