vue的交错过渡如何实现

这篇文章主要介绍了vue的交错过渡如何实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue的交错过渡如何实现文章都会有所收获，下面我们一起来看看吧。

vue实现交错过渡的方法：1、打开相应的vue文件；2、使用ransition-group组件对包裹的列表中每一个元素批量进行transtion组件的操作；3、给每个列表项加上不同延时即可。

Vue 的列表交错过渡

基于vue的，需要你对 vue 的 transition 和 transition-group有过使用和了解。

transition

vue的文档对 transtion 组件已经有了很详细的 分析 了。

这里说一下我的理解：

transtion 是vue提供的一个抽象组件，会在 合适的时机 帮我们操作其包裹的子元素。

这个合适的时机是：

1. beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)

2. enter dom 插入页面之后的 下一帧(对应下图的动画中)

3. afterEnter dom 动画完成之后的 下一帧(对应下图的动画结束)

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-groupv-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-groupv-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*100data-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="";}}})

嗯 不错，不过既然都上 js 了，能限制的就只有你的想象力了。

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的交错过渡如何实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue的交错过渡如何实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：thinkphp admin的写法是什么

下一篇：vue适用多页面应用怎么实现

---