transition-group是表示的一组动画,一般常配合v-for动态渲染使用
注意点:多个动画列表过渡时,必须设置key值! 并且key值不能用index,要用id
代码示例:
<div class="output-information-content">
<transition-group>
// :class="controlObj.exportList.length % 2 === 0 ? index % 2 === 0 ? 'output-information-item-bg' : '' : index % 2 === 0 ? '' : 'output-information-item-bg'" 作用是加个背景色
<div class="output-information-item" v-for="item in exportList" :key="item.id" :class="exportList.length % 2 === 0 ? index % 2 === 0 ? 'output-information-item-bg' : '' : index % 2 === 0 ? '' : 'output-information-item-bg'">
<span></span>
<span>{{ item.log }}</span>
</div>
</transition-group>
</div>
data() {
return {
exportList: [
{
id: 1,
log: '数据1'
},
{
id: 2,
log: '数据2'
},
]
}
},
created() {
// 这里是模拟数据的增加
let index = 2
setInterval(() => {
index++
const aa = {
id: index,
log: '数据' + index
}
this.exportList.unshift(aa)
}, 2000)
}
<style lang="scss" scoped>
.v-enter-active {
animation: move 1s linear;
}
// 通过改变绝对定位的位置来达到移动的效果
@keyframes move {
0% {
top: -30px;
height: 0px;
}
100% {
top: 0px;
height: 30px;
}
}
// 这里记得加绝对定位
.output-information-content {
height: 100%;
overflow: auto;
position: relative;
.output-information-item {
width: 100%;
height: 30px;
line-height: 30px;
position: relative;
left: 0;
}
}
.output-information-item-bg {
border-radius: 5px;
background-color: rgba(2, 217, 253, 0.3);
}
</style>