2016
Jan
03

CSS Transitions 是 CSS 3 中的一個新的屬性,可以讓前端開發者輕易的做出動態效果,例如淡入,淡出,展開,縮合等等。

一些比較舊的瀏覽器目前不支援 CSS Transitions ,下圖列出了各種瀏覽器的支援程度:

IE 10, IE 11, Firefox, Chrome 等等都有支援 Transitions 。

用 Transitions 實作展開/縮合功能

Div 展開與縮合是一個很常見的功能,而我們可以用 Transitions 作出慢慢展開的 Animation 效果。

"transition: height 2s;" : 先說明這個屬性的功能,height 2s 代表當 Element 的高度有改變時,在 2 秒內,高度會慢慢的改變到最終值,所以我們必須給兩個值,一個起始值(O),一個最終值(E) ,每秒改變值為 (E-O) / 2。

例如原本的高度為 100 px ,而我要改成 400 px ,transitions 則會每秒增加 200 px ,總共變化 2 秒, CSS 範例如下。

CSS transition
  1. .box {
  2. transition: height 2s;
  3. }
  4. .box-close {
  5. height: 100px;
  6. }
  7.  
  8. .box-open {
  9. height: 480px;
  10. }

CSS 實際執行結果如下,點擊"展開按鈕"就會有動態展開的效果。


上面的範例我高度直接給 480 px ,但是大部分的情況是我們不知道 div 的正確高度為多少,這時可以使用 max-height 來取代 height ,這樣就可以讓 div 自動展開至正常的高度,而不用自已指定一個高度,缺點是要給予 max-height 一個足夠大的值,至少要大於 div 的高度最終值。

transitions max-height
  1. .box {
  2. transition: max-height 0.35s;
  3. }
  4. .box-close .box {
  5. max-height: 70px;
  6. }
  7.  
  8. .box-open .box {
  9. max-height: 400px;
  10. }

CSS 實際執行結果如下,點擊"展開按鈕"就會有動態展開的效果。

scrollHeight 去抓正確的高度

上述的兩個方法,都有一些缺點,算得不夠精準,最正確與精準的作法是使用 scrollHeight 去取得 div 的正確高度,然後直接指定給最終值,不過這個做法必須靠 JavaScript 才能取得 scrollHeight 的值,範例如下。

transitions scrollHeight
  1. function toggleFunc(E) {
  2. E.preventDefault();
  3. var box = document.querySelector('.box');
  4. var orgHeight = parseInt(box.style.height, 10);
  5. box.style.height = (orgHeight > 100) ? "80px": box.scrollHeight + "px";
  6. }

JS/CSS 實際執行結果如下,點擊"展開按鈕"就會有動態展開的效果。

相關文章


回應 (Leave a comment)