[动画工具] Animations

做者：滴滴公共前端团队 - fen

前言

咱们内部基于 Vue 作了一套公司级的 H5 编辑器解决方案，里面也包含了高度定制的动画 - 由咱们专攻动画方向的妹子来定制完成第一版，而后提供配置化。

需求

要求三个图片之间进行过渡：

第一张从正常慢慢放大，最后一帧第一张透明消失

在第二张出现，从左往右偏移

第三张，从右往左偏移。

难点

1. 图片之间如何在最后一帧进行透明显示隐藏？

2. 图片之间过渡如何协调完美？

三张图片进行动画过渡，接下来，我们看看代码：

HTML

从中能够看到：【类名过滤了一下，至少示意用】

三个 div 包含着图片每一个 div 后两个类名不一样

img0、img一、img2 是写不一样样式的

Pulled、PulledL、PulledR 这个类名是写不一样动画的

重点看动画之间是如何过渡的，如图：

css

前两张图片先执行动画，到最后一帧的时候，执行透明度显示隐藏的操做，通常的思路是

从 0% 就写 opacity:1; 到100% 写 opacity:0

可是，你会发现效果不是咱们想要的

这里也感谢大漠老师提供的思路，以下：

在动画 99% 和100% 来作 opacity:1; opacity:0;

Animations 调试工具

咱们介绍一下 Chrome 的这个调试动画的工具，叫：Animations

这个工具能够直接在浏览器里面调试动画之间的过渡时间，让动画上下时间能够完美链接，如图所示：

感兴趣的伙伴能够去操做试试～

---

欢迎关注DDFE
GITHUB：github.com/DDFE
微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码