vue实现交错过渡的方法：1、打开相应的vue文件；2、使用ransition-group组件对包裹的列表中每一个元素批量进行transtion组件的操作；3、给每个列表项加上不同延时即可。
本教程操作环境：Windows10系统、Vue 3版、Dell G3电脑。
vue的交错过渡怎么实现？
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-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;}复制代码
登录后复制
用 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)。
告诉浏览器元素的不同状态，除了类名之外，
我们可以直接操作dom，把样式写到内联，
除了完全不用写css类名之外，
还可以有更多的编程性。
style
html
登录后复制
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 = ""; } }})
登录后复制
嗯 不错，不过既然都上 js 了，能限制的就只有你的想象力了。
html
登录后复制
getRandom() { var rate = Math.floor(Math.random() * 90 + 10); return Math.random() > 0.5 ? rate : -1 * rate;}
登录后复制
以上就是vue的交错过渡怎么实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3230916.html
