推荐设备MORE

图标设计网站

图标设计网站

行业知识

酒店预订小程序开发_vue的列表交错过渡完成代码

日期:2021-01-07
我要分享
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

 div id="app" @click="num === 0 num++ : num = 5" 
 transition-group name="list" 
 item v-for="n in num" :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

 div id="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" 
 item v-for="(n,index) in num" :key=n :data-delay=index*100 / 
 /transition-group 
 /div 

当只用 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

 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 

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()"

var rate = Math.floor(Math.random() * 90 + 10); return Math.random() 0.5 rate : -1 * rate;


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。