[動畫工具] 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」或掃描下面的二維碼