transition-duration 必须带单位（s 或 ms），缺单位会被忽略；transition-timing-function 需按场景选曲线；transition-delay 延迟监听而非播放；transition-property 应明确指定而非用 all。
transition-duration 控制动效时长，但单位写错会完全失效
动效不触发、或者瞬间完成，大概率是 transition-duration 值没写对。它只接受时间值，必须带单位（s 或 ms），写成 transition-duration: 300（缺 ms）或 transition-duration: 0.3（缺 s）都会被浏览器忽略，退回到默认的 0s。
常见写法：
-
transition-duration: 0.25s—— 推荐，小数秒更易读 -
transition-duration: 300ms—— 精确到毫秒，适合微调 -
transition-duration: 1.5s—— 超过 1 秒建议用秒，避免写成1500ms
注意：不能写成 transition-duration: "0.3s"（加引号）、transition-duration: 0,3s（逗号）、或混用单位如 300s（那是五分钟）。
transition-timing-function 决定“快慢节奏”，不是所有曲线都适合交互
默认的 ease 是缓入缓出，但按钮悬停、加载反馈、菜单展开等场景需要不同节奏。选错函数会让动效显得迟滞或突兀。
实用组合建议：
- 按钮悬停反馈 →
transition-timing-function: ease-in-out（比默认更平滑，减少初始顿感） - 下拉菜单展开 →
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)（轻微 overshoot，增强方向感） - 加载指示器旋转 →
transition-timing-function: linear（匀速才显稳定） - 慎用
ease-in单独用于显示类动效（起始太慢，用户感知延迟）
调试时可临时用 transition-timing-function: steps(4, end) 检查是否真在动——它会把过渡切成离散帧，一眼看出是否生效。
transition-delay 不是“延后播放”，而是“延后开始监听变化”
很多人以为 transition-delay: 0.5s 是让动效等半秒再播，其实它延迟的是「浏览器开始采集属性变化的时间点」。如果在这 0.5 秒内状态又变了（比如鼠标快速移入又移出），这次过渡可能直接被丢弃。
典型陷阱：
- 给
:hover加transition-delay后，快速划过多个元素，动效经常不触发 - 和 JavaScript 动态 class 切换混用时，
delay可能导致 class 已删、过渡才刚启动，结果动的是“反向”（比如从 visible → hidden 的收缩） - 移动端 touch 事件响应延迟高，
transition-delay容易加剧卡顿感，建议设为0s或用 JS 控制时机
真正需要“等待后再动”，通常该用 JS 的 setTimeout + class 切换，而不是依赖 transition-delay。
transition-property 必须明确指定，别偷懒写 all
写 transition: all 0.3s ease 看似省事，但会把所有可动画属性（包括 box-shadow、transform、opacity、甚至意外的 background-position）全卷进来。一旦某处 CSS 改了未预期的属性，就会触发额外过渡，干扰主逻辑。
安全做法：
- 按钮颜色变化 →
transition-property: background-color, color - 卡片缩放 →
transition-property: transform（性能最好） - 折叠面板高度 →
transition-property: max-height（注意：height 不支持过渡，得用 max-height + overflow - 绝对定位移动 →
transition-property: left, top，但更推荐改用transform: translate()（触发 GPU 加速）
复杂组件建议拆成多个 transition 声明，比如：transition: opacity 0.2s, transform 0.3s ease-out —— 不同属性用不同时长和节奏，控制力更强。
transition 的核心不是“让它动起来”，而是“让它按你设想的方式、时机、范围去动”。很多动效 bug 其实源于 property 没锁死、duration 单位写错、或 timing-function 和场景错配——这些地方一松动，整个交互节奏就乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
