transition 必须作用于实际发生位移的元素本身；起始值需明确（如 translateY(0)），目标值单位需一致；避免 transform 被内联样式覆盖、display 切换或父级渲染属性干扰。
transition 要作用在哪个元素上才生效
必须加在「实际发生位移的元素」本身，而不是它的父容器或子元素。如果对一个 div 设置了 transform: translateY(-100px)，但没给它写 transition，滑动就是瞬时跳变。
常见错误是只给 hover 或 class 切换的触发器加 transition，却忘了目标元素本身也要有 transition 声明。
-
transition推荐写全：比如transition: transform 0.3s ease-in-out，避免隐式继承或浏览器默认行为干扰 - 不要只写
transition: all 0.3s—— 容易意外触发动画（比如改了 color 或 opacity） - 若用 JS 动态切换 class，确保 class 中的
transform值与初始值类型一致（都用 px、% 或 em），否则动画会失效
translateY() 的起始值和目标值怎么设才平滑
起始值必须是明确可解析的数值，不能是 unset、initial 或空字符串。浏览器无法对「无值 → 有值」做插值计算。
典型做法是：初始状态用 transform: translateY(0)，目标状态用 transform: translateY(-100%) 或具体像素值（如 -200px）。
立即学习“前端免费学习笔记（深入）”；
- 百分比值依赖于元素自身的高度（不是父容器），所以用
%时要确认该元素有明确 height 或内容撑开 - 用
vh或px更可控，适合固定高度的滑动区域（如抽屉菜单、通知栏） - 避免混用单位：比如从
translateY(0)到translateY(-50vh)是 OK 的；但从translateY(0)到translateY(-100%)再切回translateY(0)，若元素高度动态变化，可能造成回弹不一致
为什么加了 transition 还是没动画？常见原因
最常被忽略的是「transform 属性被覆盖」或「触发重排失败」。CSS 动画依赖于属性变更被浏览器识别为「可过渡样式」，而某些写法会打断这个链路。
- JS 直接操作
element.style.transform后，再用 class 切换，旧内联样式会优先级更高，导致 transition 不触发 —— 解决办法是清空内联 style：element.style.removeProperty('transform') - 使用
display: none/block控制显隐时，元素会脱离文档流，transition 完全失效 —— 改用visibility: hidden+opacity: 0或控制height+overflow: hidden - 父元素设置了
will-change: transform可能引发渲染异常，尤其在 Safari 上；仅在必要时加，且记得适时移除 - 检查 DevTools 的 computed 样式面板，确认
transform确实发生了变化，并且transition条目显示为 active
配合 JS 控制滑动时要注意什么
纯 CSS 的 translateY + transition 适合简单开关场景；一旦涉及滚动定位、多段滑动、或需要监听动画结束，就得靠 JS 衔接。
- 监听
transitionend事件时，注意它会在每个过渡属性上都触发一次 —— 如果同时过渡transform和opacity，会收到两次事件；建议用event.propertyName === 'transform'过滤 - 移动端需处理 touch 操作带来的惯性滚动冲突：滑动中快速 toggle class 可能导致 transform 值错乱，建议加节流或禁用交互期间的触发
- 用
getBoundingClientRect()计算目标位移量时，注意它返回的是 layout 后的值，若元素尚未渲染（比如刚 append 进 DOM），需先 force reflow（例如读取offsetHeight）再设 transform
overflow、transform-style 或 contain 都可能悄悄截断动画。动手前先在最简 HTML 里验证基础动效，再一层层加复杂逻辑。 
