用v-for优美地加载动画

原创
09/28 08:13
阅读数 50

来源:https://juejin.im/post/6869195042599206919

作者:mmdjj

开始

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

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


温馨提示,本文需要了解的知识点如下:
  • css过度属性transition
  • css动画属性animation
  • vue动画介绍
  • vue动画之列表
官方文档的介绍十分详细,我就不做赘述了,这里通过实践说一下vue动画钩子函数思想以及我的使用心得。

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

1.跟进列表

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


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


2.段落列表

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


@keyframes one-in {    from { padding-left100%;}    to { padding-left0%; }}


3.交错列表

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


从左下出现,高度从零变到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.更多构想

实践到这,越来越觉得页面的动画不好看,不是我们的能力差,而是我们的想象力还不够
翻转列表 源代码点击这里


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


思想

1.对思想的理解

如果说思想,简单的说就是vue在自己封装的transition组件上检测所有子节点的插入和移除,依次在这些属性作用的各个阶段抛出钩子函数接受我们前端er自定义的动画或者第三方库里的动画。
这里的依次以插入为例指动画开始前、动画开始、动画结束,也就是对应的钩子函数beforeEntry、entry、entryTo。
所以,vue动画的原理是将一个完整的动画在编码拆分在每个阶段,然后编译阶段重新拼接为一个完整的动画,这也就是官网这个图的含义。


2.实践心得

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

(2)多用动画属性

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

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

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


CC推荐



· 加我微信(codenoets66),进我的技术交流群
· 关注我的公众号,做一个有趣的技术人………

本文分享自微信公众号 - CC前端手记(codenotescc)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部