在前面的博客我们一直在操作单个元素的过渡，如果是对多个元素过渡，例如列表，这时就要用到<transition-group>这个组件了；
如何使用：将要操作的列表元素放在<transition-group></transition-group>内，其他与<transition>基本一致； 注意：在<transition-group>的元素要指定个唯一的 :key 属性
例如：
代码：
<transition name='fade'>
<div v-show="flag" class="mybtn"></div>
<div v-show="flag" class="mybtn"></div> </transition>
提示的错误：
当然用了transition-group还不对
提示错误：子组件需要一个key
注意，它们的key值是数值，如果是一个字符型，需要在其vue代码中定义其属性，将属性定义为数值，当然子组件的key值不能一样的
最终修改后正确的效果：
实现两个组件的代码：
<div>
<button @click="flag=!flag">显示/隐藏</button>
<transition-group name='fade'>
<div v-show="flag" class="mybtn" :key='a'></div>
<div v-show="flag" class="mybtn" :key='b'></div>
</transition-group>
</div>
vue代码：
let vm= new Vue({
data:{
flag:false,
a:'',
b:''
}
}).$mount('div');
总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_列表过渡</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .mybtn{ width: 100px;
height: 100px;
background-color: red;
transform: translateX(50px);
}
.fade-enter-active,.fade-leave-active{
transition: all 2s; }
.fade-enter{
opacity: ;
transform: translateX(0px);
}
.fade-enter-to{
opacity: ;
transform: translateX(50px);
}
.fade-leave{
opacity: ;
transform: translateX(50px);
}
.fade-leave-to{
opacity: ;
transform: translateX(0px);
} </style> </head>
<body>
<div> <button @click="flag=!flag">显示/隐藏</button>
<transition-group name='fade'>
<div v-show="flag" class="mybtn" :key='a'></div>
<div v-show="flag" class="mybtn" :key='b'></div> </transition-group> </div>
</body> <script> let vm= new Vue({
data:{ flag:false,
a:'',
b:'' } }).$mount('div'); </script>
</html>
测试transition-group的使用
小案例
最终效果：
vue代码：
<script>
let vm= new Vue({
data:{
flag:false,
a:'',
b:'',
numArray:[,,,,]
},
methods:{
addNum(){
let num=Math.ceil(Math.random()*);//向上取整
this.numArray.push(num);
},
removeNum(index){
this.numArray.splice(index,);
}
}
}).$mount('div');
</script>
以上代码根据索引删除数字
<div>
<button @click="addNum">添加数字</button>
<transition-group name='fade'>
<li v-for="(item,index) in numArray" :key="item">
{{item}}
<button @click="removeNum(index)">-</button>
</li>
</transition-group>
</div>
在transition-group中默认是tag='span'
用到的样式：
<style>
.fade-enter-active,.fade-leave-active{
position: absolute;
transition: all .5s;
}
.fade-enter{
opacity: ;
transform: translateX(-20px);
}
.fade-enter-to{
opacity: ;
}
.fade-leave{
opacity: ;
}
.fade-leave-to{
opacity: ;
transform: translateX(20px);
}
.fade-move{
transition: transform .5s;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_列表过渡</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .fade-enter-active,.fade-leave-active{
position: absolute;
transition: all .5s; }
.fade-enter{
opacity: ;
transform: translateX(-20px);
}
.fade-enter-to{
opacity: ; }
.fade-leave{
opacity: ; }
.fade-leave-to{
opacity: ;
transform: translateX(20px);
} .fade-move{
transition: transform .5s;
}
</style> </head>
<body>
<div> <button @click="addNum">添加数字</button>
<transition-group name='fade'>
<li v-for="(item,index) in numArray" :key="item">
{{item}}
<button @click="removeNum(index)">-</button> </li> </transition-group> </div>
</body> <script> let vm= new Vue({
data:{ flag:false,
a:'',
b:'',
numArray:[,,,,] },
methods:{
addNum(){
let num=Math.ceil(Math.random()*);//向上取整
this.numArray.push(num);
},
removeNum(index){
this.numArray.splice(index,); }
} }).$mount('div'); </script>
</html>
小案例总的代码