transition 对 transform 无效是因为默认 transform 计算值为 none，无法与 scale(1.5) 插值；需显式声明初始值如 transform: scale(1) rotate(0deg)，并仅 transition transform；用 sass mixin 统一处理前缀；多函数必须写在同一 transform 声明中；移动端需用 settimeout 兜底 transitionend。
transition 对 transform 无效？必须显式声明起始状态
直接写 transition: all 0.3s 然后只改 transform: scale(1.5)，动画大概率不触发——因为元素默认的 transform 计算值是 none，而 none 和 scale(1.5) 之间无法插值。
解决办法是：在基础样式里就写明初始变换值：
-
transform: scale(1) rotate(0deg) translateX(0)（哪怕没动，也要写） - 再在
:hover或目标 class 中覆盖为transform: scale(1.3) rotate(12deg) translateX(8px) - 过渡只声明
transition: transform 0.3s ease，别用all
否则浏览器会尝试插值 none → scale(1.3)，直接跳过动画。
用 Sass mixin 封装 transition 而不是硬写 vendor 前缀
手写 -webkit-transition、-moz-transition 不仅冗余，还容易漏掉某个前缀导致 Safari 或旧安卓 WebView 失效。
一个轻量但够用的 Sass mixin 是：
@mixin transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
transition: $args;
}
调用时只需一行：@include transition(transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1));
注意：$args... 支持多参数传入（如时长+缓动+延迟），也兼容单值写法；别把它和 @keyframes mixin 混用——后者涉及全局作用域污染，而 transition 是局部样式行为。
transform 多函数叠加必须写在同一个 transform 声明里
下面这种写法是错的：
.box { transform: scale(1); }
.box.active { transform: rotate(45deg); }
CSS 不会合并两个 transform，后一个会完全覆盖前一个，结果只有旋转，没有缩放。
正确方式是始终用单一声明：
- 基础态：
transform: scale(1) rotate(0deg) translateY(0) - 激活态：
transform: scale(1.15) rotate(45deg) translateY(-4px) - 如果要用 CSS 变量动态控制某一项（比如只调缩放），得配合
transform: scale(var(--s, 1)) rotate(var(--r, 0deg))，且确保--s和--r都有默认值
顺序会影响视觉结果（先 scale 再 rotate 和反过来不一样），但只要写在一起，过渡就能正常工作。
移动端 transitionend 事件监听不可靠？加 timeout 兜底
在 iOS Safari 上，transitionend 经常不触发，尤其当 transform 变化幅度小、或页面有 will-change: transform 时。
监听逻辑不能只依赖事件：
- 务必检查
e.propertyName === 'transform'，避免被其他过渡干扰 - 设置与
transition-duration完全一致的setTimeout，作为 fallback 执行后续逻辑 - 例如：
const dur = 300; el.addEventListener('transitionend', handler); setTimeout(handler, dur);
真正麻烦的不是写两次，而是忘记关掉重复触发的 timeout——建议用 clearTimeout + 标志位控制，否则快速连续切换状态时会堆叠执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
