vue transition-group 列表过渡

最新推荐文章于 2025-03-26 16:24:52 发布

v折耳

最新推荐文章于 2025-03-26 16:24:52 发布

阅读量1.9w

点赞数

分类专栏： vue 文章标签： vue transition-group 列表过渡

本文链接：https://blog.youkuaiyun.com/wngzhem/article/details/53841640

版权

vue 专栏收录该内容

25 篇文章

订阅专栏

Vue的<transition-group>组件用于处理多个元素的过渡效果，弥补了<transition>的不足。在动态增删列表项时，<transition-group>会渲染元素并提供move-class属性，利用CSS transform实现平滑移动，确保列表元素位置变化的流畅性。需注意，每个子元素需设置key属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transition 只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心

为了更好适用于更多的场景，vue 提供 <transition-ground>来多个元素的过渡

首先创建了一个简单的应用，通过button 来实现动态的加减，使用了啊你，实际效果可运行一下代码

 <body>
        <div id="app">
        <button @click="add">add</button>
        <button @click="move">remove</button>
            <transition-group
            name="list"
            enter-active-class="animated bounceInDown"
            leave-active-class="animated bounceOut"
            >
                <li v-for="item in num" :key="item">{{item}}</li>
            </transition-group>
        </div>

    </body>
    <script>

        var app=new Vue({
            el:"#app",
            data:{
                show:true,
                num:10,
                statu:false
            },
            methods:{
                add:function(){
                      this.num++;
                    },
                move:function(){
                    this.num--;
                }
            }
        });

    </script>

transition-group 拥有transition所有属性

但是需要关注的是它们的不同之处：

transition本身不会渲染出元素

但是transition-group 会渲染出元素节点；默认 tag属性为<span>，可修改。

ps:transition-group 的元素必须指定key 属性

在列表元素的动态加入移除中，整个列表会因为元素的改变而相应的改变位子，这些位子属性的改变会很生硬，所以transition-group给出prop move-class;支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类

      <style>
        .div1{
            width:156px;
        }
        .cla1{
            border:1px solid #222;
            display:inline-block;
            width:50px;
            height:50px;
            text-align: center;
            vertical-align: middle;
        }
            .flip-list-move {
  transition: transform 1s;
}
        </style>
    </head>
    <body>
        <div id="app">
        <button @click="chang">reverse</button>
        <transition-group tag="div" class="div1" name="flip-list">
            <span class="cla1" v-for="item in list" :key="item">{{item}}</span>
        </transition-group>

        <button @click="add">add</button>
        <button @click="move">remove</button>
            <transition-group
            tag="ul"
            name="flip-list"
            enter-active-class="animated bounceInDown"
            leave-active-class="animated bounceOut"
            >
                <li v-for="(item,index) in num" :key="item">{{item}}={{index}}</li>
            </transition-group>
        </div>

    </body>
    <script>
    function shuffle(arr){
    var result = [],
        random;
    while(arr.length>0){
        random = Math.floor(Math.random() * arr.length);
        result.push(arr[random])
        arr.splice(random, 1)
    }
    return result;
}
        var app=new Vue({
            el:"#app",
            data:{
                show:true,
                n:3,
                num:[1,2,3],
                list:[1,2,3,4,5,6,7,8,9],
                statu:false
            },
            methods:{
                chang:function(){
                    this.list=shuffle(app.list);
                },
                add:function(){
                      this.num.splice(3,0,++this.n)
                    },
                move:function(){
                     this.num.splice(3,1)
                     console.log(this.num)
                }
            }
        });

    </script>