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

如何在vue中实现列表交错过渡？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为东营区企业提供专业的成都做网站、成都网站设计，东营区网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

transition-group

ransition-group组件会对包裹的列表中每一个元素批量进行 transtion组件的操作。

html

css

.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);
}

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

接下来给每个列表项加上不同延时即可。

transition-delay

css

.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;
}

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

用 transition-delay 配合 css选择器，确实可以实现交错过渡，

但是缺点也很明显，要写大量的 css ，修改起来也不灵活。

接下来我们用vue的 JavaScript钩子来实现。

setTimeout

html

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

new Vue({ el: "#app", data: () => ({ num: 0 }), methods: { //让我们在 beforeEnter enter afterEnter 钩子里，把 vue 帮我们做的事，自己做一遍: //添加移除 class 类名，监听 transitionend 事件。 beforeEnter(dom) { dom.classList.add('list-enter', 'list-enter-active'); }, enter(dom,done) { let delay = dom.dataset.delay; setTimeout(function () { dom.classList.remove('list-enter'); dom.classList.add('list-enter-to'); //监听 transitionend 事件 var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd"; dom.addEventListener(transitionend, function onEnd() { 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)。

new Vue({ el: "#app", data: () => ({ num: 0 }), methods: { beforeEnter(dom) { let { x = 0, y = 0, s = 1, opacity = 0 } = dom.dataset; dom.style.cssText = `transition: .3s;opacity: ${opacity};transform: scale(${s}) translateX(${x}) translateY(${y});`; }, enter(dom,done) { let delay = dom.dataset.delay; setTimeout(function () { dom.style.cssText = `transition: .3s;opacity: 1;transform: scale(1) translateX(0) translateY(0);`; //监听 transitionend 事件 var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd"; dom.addEventListener(transitionend, function onEnd() { dom.removeEventListener(transitionend, onEnd); done(); //调用done() 告诉vue动画已完成，以触发 afterEnter 钩子 }); }, delay) }, afterEnter(dom) { dom.style.cssText = ""; } } })

大橙子网站建设，新征程启航

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

其他资讯