问题

时按下Chrome中的Tab键将改变页面的布局，使隐藏的抽屉内容成为焦点。

的解决方案是：当抽屉关闭时，将visibility: hidden添加到抽屉中，防止其元素可聚焦。但是，抽屉必须在关闭动画期间可见。因此，在关闭动画期间按Tab键会重现该问题。

例子

1. 打开抽屉
2. 关上抽屉
3. 当抽屉处于关闭动画中间时，按几次Tab键。

切换按钮的位置现在永远不正确。它向上移出屏幕。

目标

我在寻找阻止这一切发生的方法。我希望它能处理抽屉中任意数量的内容，因此手动将tabIndex=-1添加到抽屉中的所有内容并不可取。

顺晟科技：

添加检查以查看动画是否正在进行，并防止在此期间使用Tab进行导航。不过，可能有更好的解决方案。

let animInProg = false

const toggle = () => {
    anim()
    const drawer = document.querySelector('#drawer')
  drawer.classList.toggle('drawer-open')
  drawer.classList.toggle('drawer-closed')
}

const toggleButton = document.querySelector('#toggle-button')
toggleButton.addEventListener('click', toggle)

function anim(){
    animInProg = true;
    return setTimeout(()=>{
    animInProg = false;
  }, 500)
}

document.addEventListener('keydown', (e)=>{
    if(animInProg && e.key == 'Tab'){
    e.preventDefault()
  }
})

#interaction-box {
  width: 80%;
  height: 200px;
  margin: auto;
  background-color: cyan;
  position: relative;
  overflow: hidden;
}

#drawer {
  position: absolute;
  bottom: 0;
  background-color: red;
  width: 100%;
  height: 50%;
  
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.drawer-closed {
  transform: translateY(100%);
  visibility: hidden;
  transition: visibility 0ms 500ms, transform 500ms ease-in-out;
}

.drawer-open {
  transition: transform 500ms ease-in-out;
}

<代码><；DIV ID=“交互框”>；<；按钮ID=“切换按钮”>；拨动抽屉<；/按钮>；<；br/>；文本1<；br/>；文本2<；br/>；文本3<；br/>；文本4<；br/>；文本5<；br/>；文本6<；br/>；文本7<；br/>；文本8<；br/>；文本9<；DIV ID=“ drawer ” Class=“ drawer-closed ”>；<；按钮>；抽屉内的按钮！<；/按钮>；<；/DIV>；<；/DIV>；