vue transition-group 列表过渡

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

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>

点这里可以跳转到人工智能网站

发表评论