是。多个类分别设置 transition 会导致属性过渡不一致而“闪一下”；应统一在基础类声明完整 transition，子类只改属性值；避免 transition: all 和 width/height 过渡；JS 触发时需统一 timing function 并用 transitionend 监听。
过渡属性写在不同 CSS 类里容易冲突吗
会。当多个类同时设置 transition，浏览器会按层叠顺序取最后一个生效的声明，但各属性（如 color、transform）可能被不同类分别控制，导致部分属性有过渡、部分没有，或过渡时长/缓动不一致——看起来就是“闪一下”或“卡半拍”。
典型场景：一个按钮有默认样式类 .btn，悬停加 .btn:hover，再通过 JS 动态加 .btn--loading；三者各自写了 transition，结果 hover 时颜色平滑，但 loading 状态切入时 transform 突然跳变。
- 避免把
transition拆到多个状态类中，统一收口到基础类 - 基础类（如
.btn）应声明完整过渡链：transition: background-color 0.2s, transform 0.2s, opacity 0.15s; - 子状态类（如
.btn:hover）只改属性值，不重复写transition
transition-property 设为 all 为什么更危险
设 transition: all 0.3s ease; 表面上省事，实际会让所有可动画属性（包括 height、overflow、z-index）都参与过渡，而其中很多属性根本不该动，或者动了也没视觉意义，反而拖慢渲染或触发意外布局重排。
比如给卡片加 all 过渡后，JS 改了 z-index 触发过渡，浏览器会尝试对整层 stacking context 做插值——这既无意义又可能卡顿。
立即学习“前端免费学习笔记（深入）”；
- 显式列出需要过渡的属性，例如：
transition: opacity 0.2s, transform 0.25s, box-shadow 0.2s; - 避免过渡
width/height，优先用transform: scale()替代 - 慎用
transition: flex 0.3s;，flex 相关属性（flex-grow、flex-basis）插值行为不一致，Chrome 和 Safari 表现可能不同
JavaScript 主动触发动画时如何同步过渡节奏
JS 修改样式后立即读取 offsetHeight 或 getComputedStyle，可能打断浏览器的过渡队列，导致动画从头开始或直接跳到终态。尤其在快速连续切换状态（如连点按钮）时，上一个过渡还没结束，下一个 transition 声明已被覆盖。
根本解法不是靠 JS 控制帧，而是让 CSS 自己“认出这是同一批变化”——用 transition-timing-function 统一锚点。
- 所有相关类共用同一套缓动函数，例如全用
cubic-bezier(0.4, 0, 0.2, 1)（标准 `ease-in-out` 的精确写法） - 时间值也尽量统一，比如主交互用
0.25s，细微反馈用0.15s，避免混用0.2s/200ms/.2s这类等价但字符串不同的写法（CSSOM 解析可能视为不同规则） - 必要时用
getTransitionEndEvent()封装监听，而不是靠setTimeout猜时长
function getTransitionEndEvent() {
const el = document.createElement('div');
const transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (let t in transitions) {
if (el.style[t] !== undefined) return transitions[t];
}
return 'transitionend';
}
transition-delay 在叠加场景下怎么不出错
transition-delay 很容易被忽略，但它一旦出现在某个状态类里（比如 .card--expanded），就会让该类的过渡比其他属性晚启动，造成“先动边框、后动阴影”的撕裂感。
更隐蔽的问题是：delay 值若依赖计算（如 calc(0.1s + 0.05s)），不同浏览器解析精度不一，可能导致 Safari 延迟 0.15s，Chrome 延迟 0.149s，最终错帧。
- 避免在多状态系统中使用
transition-delay，改用 CSS @keyframes 分阶段控制 - 如果必须延迟，统一用毫秒整数（
150ms），不用小数秒（.15s）或 calc() - 检查 DevTools 的 “Animations” 面板，确认所有过渡的 start time 是否对齐——不对齐就是 delay 或 timing function 不一致的信号
requestAnimationFrame，而是 CSS 层面让所有 transition 共享相同的 transition-duration 和 transition-timing-function 字符串。哪怕只是多了一个空格（cubic-bezier(.4,0,.2,1) vs cubic-bezier(0.4, 0, 0.2, 1)），浏览器也可能当作两个不同缓动处理，导致叠加异常。 
