transition动画丢失的主因是声明被移除、初始值缺失、JS连续操作未触发重排及Safari兼容性问题；须将transition置于基础类、显式定义起始值、强制重排、补全前缀并验证Computed值。
transition声明被移除导致动画丢失
最常见的情况是：你把 transition 写在了某个会被 classList.remove() 删除的类里，比如 .fade-out。一旦这个类被移除，transition 声明就从元素的计算样式中消失了——浏览器瞬间失去插值依据，后续加上的新类（如 .fade-in）只会让属性“啪”一下跳到目标值。
✅ 正确做法是把 transition 抽出来，放在一个永不被移除的基础类中：
.fade-el { transition: opacity 0.4s ease; }.fade-el--hidden { opacity: 0; }.fade-el--shown { opacity: 1; }
然后 JS 只负责切换状态类：el.classList.replace('fade-el--hidden', 'fade-el--shown')。这样 transition 始终在线，浏览器才能捕获变化过程。
初始值缺失或格式不一致
即使 transition 持续存在，如果起始值没显式定义，或者和目标值类型不兼容，动画照样不触发。典型例子是 background-color：用 transparent 作为起点，目标却是 rgba(255,0,0,1)，Safari 和部分 Chrome 版本会拒绝插值。
检查要点：
- 基础选择器中必须写出初始值，不能依赖默认或继承（比如
.btn { opacity: 1; }，而不是只写.btn:hover { opacity: 0.7; }） - 颜色统一用十六进制（
#ff0000）或rgb()，避免混用transparent/rgba(...,0) - 对
height、width等布局属性，禁止设为auto；改用max-height或transform: scaleY()
JS连续操作未触发重排
当你同时修改 display 和添加过渡类时（例如先设 el.style.display = 'block'，再 el.classList.add('slide-in')），浏览器可能把这两步合并成一次渲染——中间没有「旧值 → 新值」的过程，transition 就没机会启动。
补救方式很简单：在两步之间插入一次强制重排：
el.style.display = 'block';
void el.offsetHeight; // 强制同步读取布局，触发重排
el.classList.add('slide-in');
其他等效写法包括 el.getBoundingClientRect()、getComputedStyle(el).opacity，但 offsetHeight 最轻量、兼容性最好。
Safari等浏览器的私有前缀与属性限制
在 Safari 中，transition 失效往往不是逻辑问题，而是兼容性细节被忽略。比如：
- 旧版 Safari 要求显式加
-webkit-transition，且不能只加前缀简写，得配齐-webkit-transition-property和-webkit-transition-duration -
clip-path在 Safari 15.4 之前完全不支持过渡；filter: drop-shadow()需要 Safari 13.1+ -
transition-delay: 0s在某些 Safari 版本里会被跳过，建议改用0.01s
如果你用的是现代构建工具（如 Vite、Webpack + PostCSS），确保启用了 Autoprefixer 并设置了目标浏览器版本（例如 "supports": ["> 5%"]）。手动调试时，打开 DevTools 的 Computed 面板，确认 transition-property 在所有关键帧下都稳定存在，而不是只在 hover 或某类激活时才出现。
真正容易被忽略的点是：transition 不是“一加就动”，它依赖浏览器在两个时间点之间拍到两次有效的、可比较的样式快照。任何打断这个链条的操作——删掉声明、缺初始值、跳过重排、用错属性——都会让动画静默失效。排查时优先看 Computed 面板里的实际计算值，而不是只盯 CSS 文件里写了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
