vue实现列表依次逐渐进入动画

利用vue 中transition-group 实现列表逐个进入动画效果

1.vue3代码，

2.过渡动画放在 统一放在一个transiton.css文件夹中，引入到main.js或者单个组件引入

body{
padding: 0;
margin: 0;
}
/* 从右到左 */
@keyframes right-to-left {
from {
padding-left: 100%;
}
to {
padding-left: 0%;
}
}
/* 从左到右 */
@keyframes left-to-right {
from {
padding-right: 100%;
}
to {
padding-right: 0%;
}
}

更新：解决循环元素过多，防止延时时间过长，dom长期不显示

let index = 0
const enter = (el, done) => {
let delay = el.dataset.key * 150 //进入延时
if(index <= 30){//只循环30条 setTimeout(() => {
el.style.transition = 'opacity 0.4s '
el.style.opacity = 1
el.style.animation = 'right-to-left 0.4s infinite' //动画效果
el.style['animation-iteration-count'] = 1
done()
}, delay)
} else {
el.style.opacity = 1
}
}