如何在vue中实现列表交错过渡

.list-enter{
opacity:0;
transform:translateY(100%);
}
.list-enter-active{
transition:.3s;
}
/*enter-to其实可以不用写,没有显性写明，就是默认的opacity:1;transform:none;*/
.list-enter-to{
opacity:1;
transform:translateY(0);
}

.list-enter-active:nth-child(5n+2){
transition-delay:.3s;
}
.list-enter-active:nth-child(5n+3){
transition-delay:.5s;
}
.list-enter-active:nth-child(5n+4){
transition-delay:.7s;
}
.list-enter-active:nth-child(5n+5){
transition-delay:.9s;
}

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

newVue({
el:"#app",
data:()=>({
num:0
}),
methods:{
//让我们在beforeEnterenterafterEnter钩子里，把vue帮我们做的事，自己做一遍:
//添加移除class类名，监听transitionend事件。
beforeEnter(dom){
dom.classList.add('list-enter','list-enter-active');
},
enter(dom,done){
letdelay=dom.dataset.delay;
setTimeout(function(){
dom.classList.remove('list-enter');
dom.classList.add('list-enter-to');
//监听transitionend事件
vartransitionend=window.ontransitionend?"transitionend":"webkitTransitionEnd";
dom.addEventListener(transitionend,functiononEnd(){
dom.removeEventListener(transitionend,onEnd);
done();//调用done()告诉vue动画已完成，以触发afterEnter钩子
});
},delay)
},
afterEnter(dom){
dom.classList.remove('list-enter-to','list-enter-active');
}
}
})

目前来说，运行良好，实现了交错过渡的效果，也不用写大量的 css。

回头看看我们一共做了2件事，用 .list-enter .list-enter-to 和 setTimeout

告诉浏览器，在不同的时间把列表项，从opacity 0 translateY(100%) 过渡到，opacity 1 translateY(0)。

告诉浏览器元素的不同状态，除了类名之外，

我们可以直接操作dom，把样式写到内联，

除了完全不用写css类名之外，

还可以有更多的编程性。

style

html