Vue 的列表交错过渡

花里胡哨，华而不...真香

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

transition

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

这里说一下个人理解：

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

这个合适的时机是：

1. beforeEnter dom 从 js 生成，并刚插入页面的 那一帧(对应下图的动画开始)
2. enter dom 插入页面以后的 下一帧(对应下图的动画中)
3. afterEnter dom 动画完成以后的 下一帧(对应下图的动画结束)

这里屡次提到 帧 这个概念，我在上篇文章讲过 ，有兴趣能够看看

juejin.im/post/5cc309…

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>
复制代码

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;
}
复制代码

参考资料

[译] 小 Tips 让你的交互动画从 “还不错” 变成 “超级棒”

transition