CSS Transition 動畫效能提升與方法的選擇！

今天這個篇文章主要想分享一下我在工作上遇到的一個問題與最後的解決方案的選擇。

問題起因

.sidebar {
  width: 240px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
  width: 80px;
}

根本原因：複雜的 Gradient 計算

.divider {
  height: 10px;
  margin: 0.5rem 0;
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 150px),
    #d3d3d3 calc(50% - 150px),
    #d3d3d3 calc(50% + 150px),
    transparent calc(50% + 150px)
  );
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}

寬度改變了時候發生了什麼事？

當選單 width 從 240px 變成 80px 時：

• 選單寬度改變 (240px → 80px)
• 瀏覽器開始重排：
     1. 選單的新寬度計算
     2. divider 的 calc(50% - 150px) 需要重新計算！
     3. calc(50% + 150px) 也要重新計算！
     4. 檢查這個改變是否影響其他元素
     5. 檢查兄弟元素是否受影響
     6. 檢查父元素是否需要重新排版
• 動畫執行 60 幀
     1. 上面的計算重複 60 次
     2. 大量重排和重繪
     3. 卡頓！

calc() 的計算問題，一不注意就踩到！

calc() 表達式需要在動畫的每一幀重新計算：

• calc(50% - 150px) 其中 50% 是基於寬度的百分比
• width 改變了 → 50% 的值改變了 → 整個表達式需要重新計算
• 60 幀 × 複雜計算 = 效能大幅下滑

很多人可能會問為什麼不用 transform 來處理？

在深入介紹我的解決方案之前，我想先解釋為什麼在這個案例中，為什麼我選擇不是效能本來就好的 transform 而是針對 width 去處理！

最多人會用的方案之一：用 transform: scaleX() 縮放

有人可能會說：「為什麼不用 transform 避免重排？」

關於瀏覽器的選染跟重新繪製我有寫一篇文章專門介紹，有興趣可以先看看
https://thecodingpro.com/b/1pXFBuxCnFuTUIhHoo8O

.sidebar {
  width: 240px;
  transform: scaleX(1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
  transform: scaleX(0.333);
}

表面上看起來不錯，效能跟體驗都挺棒的，因為 transform 只涉及繪製，不涉及重排

但問題來了!!! 子元件也會被縮放！

選單寬度 240px → 使用 scaleX(0.333)

1. Menu items 也被縮放到 1/3
2. divider 也被縮放到 1/3
3. 文字也被縮放，變得很小
4. padding/margin 都被縮放了

要解決這個，你需要在每個子元件上反向縮放：

.menu-item {
  transform: scaleX(3);  /* 反向縮放來抵消 */
  transform-origin: left;
}

.divider {
  transform: scaleX(3);  /* 每個子元件都要寫 */
  transform-origin: left;
}

/* 如果有更多子組件... 每個都要加 */

.sidebar {
  width: 240px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* 添加這一行就好 */
  contain: layout style paint; 
}

.sidebar.collapsed {
  width: 80px;
}

/* 子元件完全不用改 */
.menu-item {
  padding: 0.75rem;
  cursor: pointer;
  border-radius: 0.375rem;
}

.divider {
  height: 10px;
  margin: 0.5rem 0;
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 150px),
    #d3d3d3 calc(50% - 150px),
    #d3d3d3 calc(50% + 150px),
    transparent calc(50% + 150px)
  );
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
}

contain: layout style paint;