transition单个节点与transition-group列表过渡全
努力_才幸福 人气:2transition单个节点过渡与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>
<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>
transition的过渡作用和transition-group
<transition>标签有两个属性,name 属性和 mode 属性。
transition
:里的 name 值fade 就是 .fade-enter-active,类名开头的 fade,
<transition name="fade" mode="out-in"> <router-view/> <router-view class="left" name="nav" /> <router-view class="right" name="con" /> </transition> .fade-enter-active, .fade-leave-active { transition:opacity .4s; } .fade-enter, .fade-leave-to { opacity:0; }
注意:transition 里面的<div key="c">111222</div>的内容是不显示,如果要显示内容需要把 transition 标签换成 transition-group 标签,
transition-group
:标里的所有子元素都要有key值,不然过渡效果是显示不出来的,而且每个子元素标签的key值是不一样的,不能重复。
<transition-group name="aaa" mode="in-out"> <router-view key="d"/> <router-view class="left" name="nav" key="a" /> <router-view class="right" name="con" key="b" /> <div key="c">111222</div> </transition-group>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容