vue的列表交错过渡实现代码示例(2)

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

<item v-for="(n,index) in num" :key=n :data-delay=index*100 :data-x="index%2 === 0 ? '-50%' : '50%'" :data-y="getRandom()+'%'" :data-s="Math.random()" />

getRandom() { var rate = Math.floor(Math.random() * 90 + 10); return Math.random() > 0.5 ? rate : -1 * rate; }