總結

記錄一下如何使用 Mui 搭配 styled component 處理簡單點擊效果動畫

版本與環境

@mui/material: 5.0.3

筆記

• 需求：使用者點擊按鈕後，按鈕需表現出「轉一圈」的動畫
• 想法梳理：
  • 透過 CSS class 來控制動畫表現與否
  • 透過 useState 來控制元件是否綁定控制動畫的 CSS class
• 實作：
  • 搭配 setTimout() 在一秒後將 useState 狀態重設回 false ，移除動畫效果
  • 使用 transform/rotate 處理動畫，至少在 Blink 與 Gecko 這兩個瀏覽器引擎中僅會觸發 re-composite，不會發生 re-flow (layout) 與 re-paint，效能表現較好
  • 因按鈕只需轉一圈，故 animation-iteration-count 設定為一次即可
• 備註：
  • 從 @mui/system export 出來的 keyframes 其實就是 @emotion/react 的 keyframes

    You can define animations using the keyframes helper from @emotion/react. keyframes takes in a css keyframe definition and returns an object you can use in styles. You can use strings or objects just like css. Ref.: Emotion: Keyframes

參考文件

• MDN: animation
• CSS Triggers: transform
• How to apply custom animation effect @keyframes in MUI?