vue的交错过渡如何实现
这篇文章主要介绍了vue的交错过渡如何实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue的交错过渡如何实现文章都会有所收获，下面我们一起来看看吧。
创新互联专注骨干网络服务器租用十余年，服务更有保障！服务器租用，成都服务器托管 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。
vue实现交错过渡的方法：1、打开相应的vue文件；2、使用ransition-group组件对包裹的列表中每一个元素批量进行transtion组件的操作；3、给每个列表项加上不同延时即可。
Vue 的列表交错过渡
基于vue的，需要你对 vue 的 transition 和 transition-group有过使用和了解。
transition
vue的文档对 transtion 组件已经有了很详细的 分析 了。
这里说一下我的理解：
transtion 是vue提供的一个抽象组件，会在 合适的时机 帮我们操作其包裹的子元素。
这个合适的时机是：
beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)
enter dom 插入页面之后的 下一帧(对应下图的动画中)
afterEnter dom 动画完成之后的 下一帧(对应下图的动画结束)
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);
}接下来给 每个列表项 加上不同 延时 即可。
transition-delaycss.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;
}复制代码
用 transition-delay 配合 css选择器，确实可以实现交错过渡，
但是缺点也很明显，要写大量的 css ，修改起来也不灵活。
接下来我们用vue的 JavaScript钩子 来实现。
setTimeouthtml
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');
}
}
})复制代码
