transition不失效需确保使用可过渡属性（如opacity、transform）并正确触发，避免display、height:auto等无效属性，用class切换而非直接改style，调试时先用transition:all验证。
transition 怎么写才不会失效
写完 transition 却没动画？大概率是漏了「可过渡属性」或「触发时机」。CSS 动画不是所有属性都能动，比如 display、height: auto、position（值为 static/relative 等本身不触发重排的切换）都不行。
实操建议：
- 优先用
opacity、transform（translate/scale/rotate），它们天然支持硬件加速，且不触发重排 - 避免对
width/height做过渡——改用max-height+ 溢出控制模拟展开收起 - 确保状态变化是「样式变更」而非「DOM 重建」：用
class切换，别用 JS 直接改style.width - 调试时加
transition: all 0.3s ease;临时看是否生效，确认后再精简到具体属性
animation 和 @keyframes 配合时常见报错
浏览器报 Invalid CSS property name 或动画压根不跑，往往是因为 @keyframes 名称和 animation-name 对不上，或者用了非法字符（比如中划线开头、空格、中文）。
实操建议：
-
@keyframes名必须是合法标识符：只能含字母、数字、下划线、短横线，且不能以数字或短横线开头（@keyframes slide-in✅，@keyframes 1slide❌） -
animation-name必须完全匹配——大小写敏感，也不能多空格 - 关键帧内不要写无效声明，比如
color: none;或transform: rotate();（缺参数）会直接让整段@keyframes失效 - 想复用动画？别复制粘贴
@keyframes，用animation的多个值叠加控制：例如animation: fade 0.2s, spin 1s linear infinite;
JavaScript 控制 CSS 动画的坑：add/remove class 不触发
JS 里加完 class，动画不动？不是代码错了，而是浏览器把「样式计算」和「重绘」合并优化掉了——它看到你「先加 class 再改样式」，就只算一次。
实操建议：
- 强制重排：在
element.classList.add("animate")后加一行void element.offsetHeight;（读一个布局信息即可） - 更稳妥的做法是用
setTimeout把 class 添加延后一帧：setTimeout(() => el.classList.add("animate"), 0) - 监听动画结束？用
animationend事件，但注意它不冒泡，且event.animationName要和@keyframes名严格一致 - 避免在动画进行中反复 toggle 同一个 class，可能中断当前帧或触发意外 reset
prefers-reduced-motion 怎么安全降级动画
用户开了系统「减少动画」选项，你的 transition 和 animation 默认照常跑，这违反可访问性规范，也容易引发眩晕。
实操建议：
- 全局兜底：在根选择器加
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } - 更精细控制：给需要保留的动画加
reduce-motion-safe类，再用@media单独放行该类的动画 - JS 中检测：
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { /* 跳过动画逻辑 */ } - 注意：Safari 对
prefers-reduced-motion支持较晚（iOS 13+/macOS 10.15+），旧版本需 fallback 到用户手动开关
真正难的不是写出动效，而是让动效在不同设备、系统设置、JS 执行时机下都稳定响应——尤其 transform 和 opacity 的组合、重排触发点、媒体查询的层级覆盖，稍不注意就会在某个机型上静音播放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
