<dialog>元素内的<button>导致translate动画失效问题

我来帮你拆解这个问题的根源，再给出几个实用的解决办法：

问题原因 #

这个奇怪的行为其实是浏览器对<dialog>元素的默认机制搞的鬼：当你调用showModal()打开对话框时，浏览器会自动把焦点移到对话框内部第一个可交互的元素（也就是你里面的Close按钮）。而此时你的.modal-box2还处于translate: 0 100%的位置（完全在视口底部外），浏览器为了让聚焦的按钮保持可见，会强制触发页面滚动——这个滚动行为直接干扰了translate动画的正常执行，不仅让动画看起来“失效”，还凭空出现了多余的滚动条。

当你移除按钮后，对话框里没有可聚焦的元素，浏览器不会触发自动聚焦和滚动，动画自然就能正常播放了。

解决办法 #

这里提供几个不同方向的方案，你可以根据自己的需求选：

方案1：纯CSS修复（无需JS）

通过让.modal-box2脱离文档流，避免浏览器因聚焦元素触发滚动：

.modal2 {
  pointer-events: none;
  display: flex;
  position: relative; /* 新增：让子元素相对它定位 */
  width: 100%;
  height: 100vh; /* 确保占满视口高度 */
  
  &.modal-open, &[open], &:target {
    pointer-events: auto;
    .modal-box2 {
      translate: 0 0%;
    }
  }
}

.modal-box2 {
  transition: translate 1s linear;
  position: absolute; /* 新增：脱离文档流 */
  bottom: 0;
  left: 0;
  right: 0;
  /* 保留你原来的其他样式，比如背景、padding等 */
}

这个方法通过绝对定位让模态框容器脱离正常文档流，浏览器就不会因为内部按钮的位置而触发页面滚动了，动画就能正常执行。

方案2：延迟聚焦按钮（JS控制）

等动画完全结束后，再让按钮获得焦点，避免浏览器提前触发滚动：
首先修改触发按钮的点击事件：

<button class="btn" onclick="openModal()">open modal</button>

然后添加对应的JS代码：

function openModal() {
  const modal = document.getElementById('my_modal_5');
  modal.showModal();
  
  // 等待动画完成（和你的transition时长1s一致）后再聚焦按钮
  setTimeout(() => {
    const closeBtn = modal.querySelector('button');
    if (closeBtn) closeBtn.focus();
  }, 1000);
}

方案3：阻止默认聚焦行为（更优雅的JS方案）

监听对话框的聚焦事件，阻止默认行为，然后在动画结束后手动聚焦：

const modal = document.getElementById('my_modal_5');

// 打开时阻止默认聚焦
modal.addEventListener('focus', (e) => {
  e.preventDefault();
}, { once: true });

// 动画结束后手动聚焦按钮
modal.addEventListener('transitionend', () => {
  const closeBtn = modal.querySelector('button');
  if (closeBtn) closeBtn.focus();
});

验证效果 #

这几个方案都能解决你遇到的问题：动画会正常从底部滑入，不会出现多余的滚动条，同时按钮的交互功能也能正常使用。

内容来源于stack exchange