Vue中transition单个节点过渡与transition-group列表过渡全过程
作者：努力_才幸福
这篇文章主要介绍了Vue中transition单个节点过渡与transition-group列表过渡全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
transition单个节点过渡与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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。