vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例

<div id="app" @click="num === 0 ? num++ : num = 5">
 <transition-group name="list">
 <item v-for="n in num" :key=n />
 </transition-group>
</div>

.list-enter {
 opacity: 0;
 transform: translateY(100%);
}
.list-enter-active {
 transition: .3s;
}
/* enter-to其實(shí)可以不用寫, 沒有顯性寫明，就是默認(rèn)的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;
}

<div id="app" @click="num === 0 ? num++ : num = 5">
 <!-- 這里加上 v-bind:css="false" 讓vue跳過對(duì)css的檢測(cè)，讓我們更好控制 動(dòng)畫完成的時(shí)機(jī) -->
 <transition-group 
 v-bind:css="false"
 v-on:before-enter="beforeEnter" 
 v-on:enter="enter"
 v-on:after-enter="afterEnter">

 <item v-for="(n,index) in num" :key=n :data-delay=index*100 />

 </transition-group>
</div>

new Vue({
 el: "#app",
 data: () => ({
 num: 0
 }),
 methods: {
 //讓我們?cè)?beforeEnter enter afterEnter 鉤子里，把 vue 幫我們做的事，自己做一遍:
 //添加移除 class 類名，監(jiān)聽 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');
 //監(jiān)聽 transitionend 事件
 var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
 dom.addEventListener(transitionend, function onEnd() {
 dom.removeEventListener(transitionend, onEnd);
 done(); //調(diào)用done() 告訴vue動(dòng)畫已完成，以觸發(fā) afterEnter 鉤子
 });
 }, delay)
 },
 afterEnter(dom) {
 dom.classList.remove('list-enter-to', 'list-enter-active');
 }
 }
})

<div id="app" @click="num ? num++ : num=5">
 <transition-group 
 v-bind:css="false" 
 v-on:before-enter="beforeEnter" 
 v-on:enter="enter"
 v-on:after-enter="afterEnter">

 <item v-for="(n,index) in num" 
 :key=n 
 :data-delay=index*100 
 data-y="100%"
 />

 </transition-group>
 </div>

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);`;
 //監(jiān)聽 transitionend 事件
 var transitionend = window.ontransitionend ? "transitionend" : "webkitTransitionEnd";
 dom.addEventListener(transitionend, function onEnd() {
 dom.removeEventListener(transitionend, onEnd);
 done(); //調(diào)用done() 告訴vue動(dòng)畫已完成，以觸發(fā) afterEnter 鉤子
 });
 }, delay)
 },
 afterEnter(dom) {
 dom.style.cssText = "";
 }
 }
})

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