transition仅对可插值的CSS属性生效，需明确指定属性名而非all，且必须通过状态变化（如:hover、class切换）触发；timing-function推荐cubic-bezier()精细控制，transitionend事件需过滤propertyName并防重。
transition作用对象必须是可变化的CSS属性
不是所有CSS属性都能加过渡效果，transition 只对「有中间状态」的属性生效，比如 opacity、transform、width、background-color。像 display、height（当设为 auto 时）、position（值本身无连续性）这类属性无法插值，强行写上去不会动。
常见误用：transition: all 0.3s 看似省事，但会把不可动画的属性也纳入监听，既无效又可能干扰渲染性能。建议明确写出要过渡的属性名。
transition: opacity 0.2s ease-in, transform 0.3s cubic-bezier(0.2,0.8,0.4,1)- 避免写
transition: display 0.3s—— 它完全不触发动画 - 想让
height动起来？得指定具体数值（如height: 0→height: 100px），不能用height: auto
transition必须配合状态变化才触发
transition 本身只是声明「怎么动」，不是「自动动」。它依赖于触发条件：通常是伪类（如 :hover）、class 切换、内联样式变更等引起属性值改变的时刻。
典型场景是鼠标悬停或 JS 控制 class：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: #333;
transition: background-color 0.25s;
}
button:hover {
background-color: #007bff;
}
- 没写
:hover或没通过 JS 添加/移除 class，transition就永远不启动 - 如果用 JS 直接改
style.backgroundColor，要确保旧值和新值都已计算完成（有时需强制 reflow，比如读取一次offsetHeight） - 用
transition-delay时注意：延迟的是「开始时间」，不是整个动画时长
transition-timing-function决定动画节奏感
默认的 ease 是缓入缓出，但多数真实交互需要更精准控制。直接写关键字（如 linear、ease-out）简单，但真正灵活的是 cubic-bezier()。
浏览器开发者工具里可以可视化调节贝塞尔曲线，Chrome DevTools 的 Styles 面板点一下 timing-function 小图标就能拖拽调试。
-
ease-in-out适合淡入淡出类切换 -
ease-out常用于下拉菜单展开（先快后慢，显得稳） - 慎用
step-start/step-end：它们产生帧动画效果，但和transition的语义冲突，更适合@keyframes - 多个属性不同节奏？分开写：
transition: opacity 0.2s linear, transform 0.4s cubic-bezier(0.34,1.56,0.64,1)
transitionend事件监听要注意兼容性和触发条件
想在动画结束后做点事（比如删除 DOM、启用按钮），靠 transitionend 事件。但它有几个坑：
- 一个元素多个可过渡属性，会触发多次事件（每个属性各一次），需用
event.propertyName过滤，比如只响应transform - 浏览器前缀残留：老版 Safari 要监听
webkitTransitionEnd，现在基本不用了，但若支持 iOS 10 以下就得留心 - 动画被中断（比如 hover 中途移开鼠标），也会触发
transitionend，且event.elapsedTime会小于声明的持续时间 - 没有动画发生时（比如属性值根本没变），事件不会触发 —— 别假设它总会出现
最稳妥的写法是加防重逻辑 + 属性过滤：
el.addEventListener('transitionend', (e) => {
if (e.propertyName === 'transform') {
// 处理 transform 结束后的逻辑
}
});
实际项目中，最容易被忽略的是「过渡属性是否真的发生了变化」——值相同、单位隐式转换（如 px 和 rem 混用）、或 CSS 层叠覆盖导致声明未生效，都会让 transition 彻底静音。 
