前言

我們內(nèi)部基于 Vue 做了一套公司級的 H5 編輯器解決方案，里面也包含了高度定制的動畫 - 由我們專攻動畫方向的妹子來定制完成初版，然后提供配置化。

需求

要求三個圖片之間進行過渡：

第一張從正常慢慢放大，最后一幀第一張透明消失

在第二張出現(xiàn)，從左往右偏移

第三張，從右往左偏移。

難點

1. 圖片之間如何在最后一幀進行透明顯示隱藏？

2. 圖片之間過渡如何協(xié)調(diào)完美？

三張圖片進行動畫過渡，接下來，咱們看看代碼：

HTML

從中可以看到：【類名過濾了一下，至少示意用】

三個 div 包含著圖片每個 div 后兩個類名不同

img0、img1、img2 是寫不同樣式的

Pulled、PulledL、PulledR 這個類名是寫不同動畫的

重點看動畫之間是如何過渡的，如圖：

css

前兩張圖片先執(zhí)行動畫，到最后一幀的時候，執(zhí)行透明度顯示隱藏的操作，一般的思路是

從 0% 就寫 opacity:1; 到100% 寫 opacity:0

但是，你會發(fā)現(xiàn)效果不是我們想要的

這里也感謝大漠老師提供的思路，如下：

在動畫 99% 和100% 來做 opacity:1; opacity:0;

Animations 調(diào)試工具

我們介紹一下 Chrome 的這個調(diào)試動畫的工具，叫：Animations

這個工具可以直接在瀏覽器里面調(diào)試動畫之間的過渡時間，讓動畫上下時間可以完美連接，如圖所示：

感興趣的伙伴可以去操作試試～