CSS | transition 和 transform的用处和区别

省流总结： 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 让这个旋转过程是平滑的动画