元素实现右侧滑入的模态动画 " />

使用 transform: translateX() 替代 right 定位可避免 触发顶层（top layer）布局偏移，确保仅对话框自身平滑滑入，而非整个页面内容位移。

使用 `transform: translatex()` 替代 `right` 定位可避免 `

` 触发顶层（top layer）布局偏移，确保仅对话框自身平滑滑入，而非整个页面内容位移。

元素默认渲染在浏览器的「顶层（top layer）」中，这是其作为模态组件的关键机制——它脱离常规文档流、覆盖所有内容、并自动获得焦点与 backdrop。但这也意味着：直接修改 left/right/top/bottom 等定位属性，可能干扰顶层渲染逻辑，导致浏览器错误地将位移应用到整个视口或 body 上（如问题中“body 向左滑入”的异常现象）。

正确的做法是保持

在顶层中的自然定位，仅通过 transform 进行视觉位移

。transform 属于合成层操作，不触发重排（reflow），且完全独立于布局上下文，因此能精准控制元素自身运动，不影响其他内容。

以下是推荐实现方案：

✅ 关键要点：

• 移除所有 left/right 初始偏移样式（如 right: -200px），改用 transform: translateX(100%) 表示初始位置（完全位于视口右侧外）；
• 为
  设置 position: fixed 和 inset: 0，确保其尺寸可控、居中定位基础稳定；
• 动画仅作用于 transform，避免混合使用 right 与 transform；
• 保留 margin-right: 0 防止某些 UA 样式干扰。

.slide-in {
  position: fixed;
  inset: 0;
  margin-right: 0;
  /* 不设 left/right/top/bottom 偏移 */
}

.slide-in[open] {
  animation: slide-in 0.5s forwards;
}

@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

⚠️ 注意事项：

• 不要为 .slide-in 设置 display: none 或 visibility: hidden ——
  的 open 属性已控制显隐，强制隐藏会破坏 top layer 行为；
• 若需背景遮罩（backdrop），可利用 ::backdrop 伪元素自定义样式（现代浏览器支持良好）；
• 动画结束后建议添加 forwards，确保最终状态保留 translateX(0)，避免闪回；
• 在移动端需注意 inset 兼容性（Chrome 87+/Firefox 92+/Safari 15.4+ 支持），旧版可降级为 top: 0; right: 0; bottom: 0; left: 0;。

此方案简洁、符合规范、无副作用，真正实现了“对话框从右滑入”的预期动效。