css 过渡能否控制开始方向_通过初始状态设定实现

不能，transition 本身不支持方向控制，所谓“从右滑入”等效果实为通过初始 transform 值（如 translateX(100%)）和 visibility/opacity 配合实现的视觉错觉。

transition 能否控制动画起始方向？不能，但可以骗过它

css transition 本身不接受“方向”参数，也没有 transition-direction 这种属性。所谓“从左边滑入”“从顶部缩放展开”，实际是靠**初始状态的 CSS 值**来决定视觉上的“起始方向”。浏览器只在两个状态间插值，它不管你是从哪边“来”的——它只认你写在 transition 触发前那一刻的值。

如何让元素看起来“从右侧进入”？靠初始 transform + visibility 配合

典型做法是：在未激活状态（比如 hover 前、class 未添加时）把元素用 transform 移出视口，并设 visibility: hidden 或 opacity: 0；触发后还原为正常位置和可见性。过渡效果就自然呈现“从右入”的错觉。

• 必须用 transform: translateX(100%)（或 translateX(-100vw)）而非 left: 100%，后者触发布局重排，性能差且可能失效
• visibility: hidden 比 display: none 更安全——后者会中断 transition，因为元素完全脱离渲染树
• 确保过渡属性明确列出：transition: transform 0.3s ease, opacity 0.3s ease，避免写成 all 导致意外属性参与过渡

.box {   opacity: 0;   transform: translateX(100%);   transition: transform 0.3s ease, opacity 0.3s ease; } 
.box.active { opacity: 1; transform: translateX(0); }

为什么 :hover 直接改 left/top 不推荐？重排风险高

用 left、top、width 等触发 layout 的属性做过渡，会导致浏览器每帧都重新计算布局（reflow），动画卡顿明显，尤其在中低端设备上。

• chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 可直观看到重排区域变红
• transform 和 opacity 是仅有的两个能走合成层（compositor layer）的 CSS 属性，GPU 加速，60fps 更稳
• 若必须用 top，至少加 will-change: top 提示浏览器提前升层，但不如直接换 transform

transition-delay 怎么配合“方向感”？慎用于多段入场

多个元素依次从不同方向入场（比如菜单项逐个从左、右、下飞入），靠的是给每个元素加不同的 transition-delay，但关键前提是：它们的初始 transform 值必须各自对应目标方向。

立即学习“前端免费学习笔记（深入）”；

• 第 1 个元素：初始 transform: translateX(-100%) → 激活后 translateX(0)
• 第 2 个元素：初始 transform: translateX(100%) → 激活后 translateX(0)
• 延迟值建议用 calc(0.1s * var(--i)) 配合 CSS 自定义属性，比硬写 0.1s/0.2s 更易维护

容易被忽略的一点：如果父容器有 overflow: hidden，而初始 transform 把元素移出容器边界，某些旧版 safari 会裁剪掉过渡起点，导致“闪一下才开始动”。此时可加 transform: translateZ(0) 强制创建新层，或改用 clip-path 控制裁剪逻辑。