「譯」高效的 「box-shadow」 動畫

原文地址：http://tobiasahlin.com/blog/how-to-animate-box-shadow/

如何才能防止在給 box-shadow 製做動畫過渡時致使的每一幀都要進行的重繪（re-paint），從而提升頁面的性能？
答案就是：不可能。給變化的 box-shadow 製做動畫會大大縮減頁面渲染的性能。

可是，這裏依然有相似的方法實現相同的效果。儘可能的減小重繪的次數，能夠保證你的動畫可以保證在 60 FPS 左右：經過改變子元素的 opacity 透明度。

Demo

查看這個Demo，比較一下兩種實現方式的不一樣。左邊的動畫是在 box-shadow 的 :hover 狀態時執行 box-shadow 動畫， 而右邊的實現方式中，咱們經過 :after 添加了一個僞元素，並給它添加了 box-shadow， 而後經過執行 opacity 動畫來是實現相同的效果。

若是你打開你的調試工具，能夠看到下面相似的結果（綠色部分表示繪製；越少越好）：

很明顯若是咱們直接執行 box-shadow 的動畫會致使更多的重繪。

爲何會有這樣的結果？ 只有不多的屬性 才能避免在動畫的過程不斷的重繪，像 opacity 和 transform。
這就是兩種方式的不一樣之處，下面是核心代碼：

/* The slow way */
.make-it-slow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out:
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* The fast way */
.make-it-fast {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Pre-render the bigger shadow, but hide it */
.make-it-fast:after {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out:
}

/* Transition to showing the bigger shadow on hover */
.make-it-fast:hover:after {
  opacity: 1;
}

在上面的例子中，高效的實現方式有兩層：一層負責呈現盒子，一層負責盒子陰影的過分動畫，只對陰影的 opcity 執行動畫。