省流總結： transform用于變換/變形，transition是動畫控制器
transform 用來對元素進行變形，常見的操作如下，它是立即生效的樣式變形屬性。
旋轉 rotate(角度deg)、平移 translateX(像素px)、縮放 scale(倍數)、傾斜? skewX(角度deg)
| 操作 | 示例 | 說明 |
|---|---|---|
| 旋轉 | transform: rotate(180deg) | 讓元素順時針旋轉 180 度 |
| 平移 | transform: translateX(100px) | 向右移動 100 像素 |
| 縮放 | transform: scale(1.2) | 放大到原來的 1.2 倍 |
| 傾斜 | transform: skewX(30deg) | 沿 X 軸傾斜 |
transition 用來設置?元素樣式變化時的 過渡動畫效果，它必須配合其他屬性（如 transform, opacity, color 等）的變化使用。
二者對比：
| 項目 | transform | transition |
|---|---|---|
| 作用 | 實際改變元素形狀、位置等 | 決定變換過程是否平滑 |
| 直接效果 | 會立即變換 | 只有當某些屬性變化時才起作用 |
| 是否動畫屬性 | ? 不是動畫，只是變換 | ? 是動畫控制器 |
| 常配合的屬性 | translate, rotate 等 | transform, opacity, color 等 |
問題：transition 和 transform 的用處和區別？
.header-angle { transition: transform var(vk-duration); &.is-activeed { transform: rotate(180deg); }
}? transform 是干什么的？
transform 用來對元素進行變形，常見的操作包括：
| 操作 | 示例 | 說明 |
|---|---|---|
| 旋轉 | transform: rotate(180deg) | 讓元素順時針旋轉 180 度 |
| 平移 | transform: translateX(100px) | 向右移動 100 像素 |
| 縮放 | transform: scale(1.2) | 放大到原來的 1.2 倍 |
| 傾斜 | transform: skewX(30deg) | 沿 X 軸傾斜 |
它是立即生效的樣式變形屬性。
? transition 是干什么的？
transition 用來設置?元素樣式變化時的 過渡動畫效果，比如：
transition: transform 0.3s;
它表示：當 transform 發生變化時，用 0.3 秒的時間來漸變地應用這個變化。
?? 注意：transition 不能單獨生效，必須配合其他屬性（如 transform）的變化使用。
? 二者關系總結
| 項目 | transform | transition |
|---|---|---|
| 作用 | 實際改變元素形狀、位置等 | 決定變換過程是否平滑 |
| 直接效果 | 會立即變換 | 只有當某些屬性變化時才起作用 |
| 是否動畫屬性 | ? 不是動畫，只是變換 | ? 是動畫控制器 |
| 常配合的屬性 | translate, rotate 等 | transform, opacity, color 等 |
🧪 舉個實際例子
比如一個按鈕帶小箭頭，你想點擊時箭頭旋轉：
<div :class="{ 'header-angle': true, 'is-activated': isOpen }">??
</div>
當
isOpen從false變為true時：
class="header-angle"→class="header-angle is-activated"
transform: rotate(180deg)被觸發
transition讓這個旋轉過程是平滑的動畫
”)
