动画4——使用transition-grounp
2019-04-19 本文已影响0人
小丘啦啦啦
一、列表元素的过渡
transition适用于单个节点的动画；如果要渲染列表，例如v-for，则需要使用transition-group元素。
- 不同于
transition，transition-group会以一个真是的标签呈现，默认<span>标签，可以通过tag属性改变。 - 过渡模式不可用，因为不再切换特定元素。
- 内部元素总视需要唯一的key值。
- 提供了新的过渡类特性
v-move，用于设置周围元素的平滑过渡，对于设置过渡的切换时机和过渡曲线非常有用。（否则，当添加或移除元素时，周围元素会瞬间切换到新的布局位置）
需要配合v-leave-active过渡类设置position: absolute;使用。 - 可以给
transition-group元素添加appear属性实现页面刚刚初始数据展示时的入场效果。
二、实例
实现初始数据展示入场效果，添加列表动画，删除周围元素平滑过渡。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<style>
li{
border: 1px dashed darkgrey;
padding: 10px;
font-size: 12px;
margin: 5px;
width: 200px;
}
li:hover{
background-color: pink;
transition: all 1s ease;
}
.v-enter,.v-leave-to{
opacity: 0;
transform:translateY(100px) ;
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease;
}
.v-move{
transition: all 0.5s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="添加" @click="add" />
<input type="test" v-model="id" placeholder="id" />
<input type="test" v-model="name" placeholder="名字" />
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}----{{item.name}}
</li>
</transition-group>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
id: '',
name: '',
list: [{
id: '1',
name: '初始1',
}, {
id: '2',
name: '初始2'
}]
},
methods: {
add() {
const obj = {
id: this.id,
name: this.name
};
this.list.push(obj);
},
del(i) {
this.list.splice(i, 1);
}
}
});
</script>
</body>
</html>
