跳至主要內容

优美的v-for列表:动画钩子实践

萌萌哒草头将军大约 4 分钟前端Vue用户体验

未经允许禁止转载

打个广告,可以关注我哦~

image.png
image.png

一、开始

最近忙完工作,重新撸了一遍vue官方文档,发现很少被我用到的vue动画神器,JavaScript钩子函数

趁着周末我自己做了几个demo和大家分享下,先上图

温馨提示,本文需要了解的知识点如下:

官方文档的介绍十分详细了,我就不做多余的赘述了,这里通过实践简单说下vue动画钩子函数思想以及我的使用心得

二、实践

以下动画实现仅是个人理解,并非标准,希望大佬们指点

1.跟进列表

源代码点击这里open in new window

跟进列表是从下出现,回到初始位置,我在初始阶段采用了padding-top为100%,结束阶段为0%实现这个动画(margin-top也可以实现这个动画)

@keyframes one-in {
    from {
        padding-top: 100px;
        height: 0%;
    }
    to {
        padding-top: 0px;
        height: 100%;
    }
}

2.段落列表

源代码点击这里open in new window

段落列表是从右出现,回到正常位置,我在初始阶段采用了padding-left为100%,结束阶段为0%实现这个动画(margin-left也可以实现这个动画)

@keyframes one-in {
    from {
        padding-left: 100%;
    }
    to {
        padding-left: 0%;
    }
}

3.交错列表

源代码点击这里open in new window

交错列表稍微复杂点,不过我们可以分解为两个动画。

从左下出现,高度从零变到100px(具体自己设定)

@keyframes one-in {
    from {
        padding-right: 100%;
        padding-top: 100px;
        height: 0;
    }
    to {
        padding-right: 0%;
        padding-top: 0px;
        height: 100px;
    }
}

从右上出现,高度从零变到100px(具体自己设定)

@keyframes one-in {
    from {
        padding-left: 100%;
        height: 0;
    }
    to {
        padding-left: 0%;
        height: 100px;
    }
}

然后根据列表渲染的index为奇数或偶数选择不同的动画

methods: {
    beforeEnter (el) {
        el.style.opacity = 0
    },
    enter (el, done) {
        let delay = el.dataset.index * 100
        let animation = el.dataset.index % 2 === 0
            ? 'one-in 0.4s infinite'
            : 'two-in 0.4s infinite'
        setTimeout(()=>{
            el.style.transition = 'opacity 0.4s '
            el.style.opacity = 1
            el.style.animation = animation
            el.style['animation-iteration-count'] = 1
            done()
        }, delay)
    }
}

4.更多构想

实践到这,越来越觉得页面的动画不好看,不是我们的能力差,而是我们的想象力还不够

翻转列表源代码点击这里open in new window

每个复杂的动画其实都是很多简单小动画的拼接,所以下次设计师拿来充满想象力的动画设计稿,先别急着掏菜刀,仔细分析下动画的组成部分,可能也没有那么难。

三、思想

1.对思想的理解

如果说思想,简单的说就是vue在自己封装的transition组件上检测所有子节点的插入和移除,依次在这些属性作用的各个阶段抛出钩子函数接受我们前端er自定义的动画或者第三方库里的动画

这里的依次以插入为例指动画开始前、动画开始、动画结束,也就是对应的钩子函数beforeEntry、entry、entryTo

所以,vue动画的原理是将一个完整的动画在编码拆分在每个阶段,然后编译阶段重新拼接为一个完整的动画,这也就是官网这个图的含义

2.实践心得

2.1尽量少用过度属性做复杂的动画

过度属性要求你将过度的几个状态放在不同的钩子函数中,复杂的动画代码太多,写起来不简洁,当然,如果非要这样写,建议使用添加或移除class类的方式,我一般很少用到这过度属性

2.2多用动画属性

动画属性的好处就是可以将自定义的动画重复使用,而你只需要指定动画名

2.3多使用setTiemout函数给不同dom依次设置动画延迟

想在动画上根据不同的dom设置不同的动画延迟是十分困难的,但是我们可以很方便的给dom设置动画开始时间。

参考文章:
[译] 小 Tips 让你的交互动画从 “还不错” 变成 “超级棒”open in new window