transition 不生效于 position 属性本身，因 position 是离散值；应使用 transform 或 top/left 等可插值属性实现位移过渡，其中 transform 更高性能；display 和 visibility 不支持 transition，需用 opacity 与 transform 组合实现显隐动画。
transition 不生效于 position 属性本身
直接对 position（如从 static 改为 relative）加 transition 是无效的，因为 position 是离散值，无法插值。真正需要过渡的是「位置结果」——也就是 top、left、transform 这类可计算的数值属性。
用 transform + transition 实现高性能位移
transform 触发硬件加速，且不会触发重排（reflow），比修改 top/left 更平滑、更省性能。尤其在动画频繁或元素较多时差异明显。
- 必须配合
transition指定具体属性：transition: transform 0.3s ease; - 初始状态需显式设置
transform（哪怕为none），否则首次变化可能跳变 - 避免混用
top和transform：浏览器会合并层叠效果，导致行为不可控
button {
transform: translateX(0);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
button:hover {
transform: translateX(20px);
}
用 top/left + transition 的注意事项
当必须使用 top/left（例如依赖定位上下文或与其他绝对定位元素对齐）时，要确保父容器有 position: relative 或其他非 static 值，否则偏移无效。
-
top/left只对position: relative、absolute、fixed生效 - 过渡前必须已存在可计算的起始值（不能是
auto或未声明） - 若父容器尺寸动态变化，
top/left位移可能意外偏移，transform则始终相对于自身锚点
.box {
position: relative;
top: 0;
left: 0;
transition: top 0.3s, left 0.3s;
}
.box.shifted {
top: 10px;
left: 20px;
}
transition 无法过渡 display 或 visibility
想让元素“淡入+滑入”？别试图给 display 加 transition——它完全不支持。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity控制透明度，配合transform控制位移 - 用
visibility: hidden+opacity: 0组合隐藏，再通过 JS 控制类名切换 - 过渡结束后，再用
transitionend事件清理display: none（仅用于节省渲染资源）
.fade-slide {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.2s, transform 0.2s;
}
.fade-slide.active {
opacity: 1;
transform: translateY(0);
}
实际项目中最容易被忽略的，是没给过渡属性设初始值，或者在 JS 中直接操作 style.top 却忘了先设好 transition —— 这会导致第一次动画缺失。 
