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

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

transition-group

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

html

<divid="app"@click="num===0?num++:num=5">
<transition-groupname="list">
<itemv-for="ninnum":key=n/>
</transition-group>
</div>

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

<divid="app"@click="num===0?num++:num=5">
<!--这里加上v-bind:css="false"让vue跳过对css的检测，让我们更好控制动画完成的时机-->
<transition-group
v-bind:css="false"
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">

<itemv-for="(n,index)innum":key=n:data-delay=index*100/>

</transition-group>
</div>

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

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

<divid="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">

<itemv-for="(n,index)innum"
:key=n
:data-delay=index*100
data-y="100%"
/>

</transition-group>
</div>

newVue({
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){
letdelay=dom.dataset.delay;
setTimeout(function(){
dom.style.cssText=`transition:.3s;opacity:1;transform:scale(1)translateX(0)translateY(0);`;
//监听transitionend事件
vartransitionend=window.ontransitionend?"transitionend":"webkitTransitionEnd";
dom.addEventListener(transitionend,functiononEnd(){
dom.removeEventListener(transitionend,onEnd);
done();//调用done()告诉vue动画已完成，以触发afterEnter钩子
});
},delay)
},
afterEnter(dom){
dom.style.cssText="";
}
}
})

html

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

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

看完上述内容，你们掌握如何在vue中实现列表交错过渡的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注恰卡编程网行业资讯频道，感谢各位的阅读！