作者：滴滴公共前端團隊 - fen

前言

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

需求

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

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

在第二張出現，從左往右偏移

第三張，從右往左偏移。

難點

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

2. 圖片之間過渡如何協調完美？

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

HTML

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

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

img0、img1、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”或掃描下面的二維碼

總結

以上是生活随笔為你收集整理的[动画工具] Animations的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。