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）。
