javascript - 问题 : Input focus using javascript and CSS transition

Question

我在使用 .focus() 函数和 css 转换时遇到了 javascript 中的一个奇怪问题。

请参阅下面的 jsFiddle。

我有一个带有搜索输入的模式。单击 #trigger 时，它会向模态添加一个类，并向输入添加一个 focus()(以改善用户体验)。

它的工作很好直到...我使用 CSS 过渡使它看起来更平滑(在 opacity 和 visibility 属性上)。

这个问题可能来自哪里？

提前致谢!

let trigger = document.getElementById('trigger'),
    closer = document.getElementById('closer'),
    box = document.getElementById('wrapper'),
    sInput = document.getElementById('search__input')
    
trigger.addEventListener('click', () => {
  box.classList.add('is-visible')
  sInput.focus()
})

closer.addEventListener('click', () => {
  box.classList.remove('is-visible')
})

#wrapper {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%; height: 100%;
  
  background: rgba(0, 0, 0, 0.8);
  
  visibility: hidden;
  opacity: 0;
  
  transition: opacity .1s linear, visibility .1s linear .1s;
}

#wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  
  transition: visibility .1s linear, opacity .1s linear .1s;
}

#closer {
  position: absolute;
  top: 10px; left: 10px;
  color: #000;
  background-color: white;
}

#search__input {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  font-size: 24px;
}

<a href="#" id="trigger">Click me.</a>

<div id="wrapper">
  <a href="#" id="closer">Close me.</a>
  <input type="search" placeholder="Search here" id="search__input"/>
</div>

同样的想法没有 CSS 转换

let trigger = document.getElementById('trigger'),
    closer = document.getElementById('closer'),
    box = document.getElementById('wrapper'),
    sInput = document.getElementById('search__input')

trigger.addEventListener('click', () => {
  box.classList.add('is-visible')
  sInput.focus()
})

closer.addEventListener('click', () => {
  box.classList.remove('is-visible')
})

#wrapper {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%; height: 100%;

  background: rgba(0, 0, 0, 0.8);

  visibility: hidden;
  opacity: 0;
}

#wrapper.is-visible {
  opacity: 1;
  visibility: visible;
}

#closer {
  position: absolute;
  top: 10px; left: 10px;
  color: #000;
  background-color: white;
}

#search__input {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  font-size: 24px;
}

<a href="#" id="trigger">Click me.</a>

<div id="wrapper">
  <a href="#" id="closer">Close me.</a>
  <input type="search" placeholder="Search here" id="search__input"/>
</div>

Answer 1

发生这种情况是因为隐藏、未显示或不透明的元素无法聚焦，在过渡时您的元素无法聚焦..

Why changing visibility/display on focus does not work?

要修复它我会推荐使用超时回调

let trigger = document.getElementById('trigger'),
    closer = document.getElementById('closer'),
    box = document.getElementById('wrapper'),
    sInput = document.getElementById('search__input')
    
trigger.addEventListener('click', function() {
  box.classList.add('is-visible');
  setTimeout(()=>{
    sInput.focus();
  },1000);
  
})

closer.addEventListener('click', () => {
  box.classList.remove('is-visible')
})

#wrapper {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%; height: 100%;
  
  background: rgba(0, 0, 0, 0.8);
  
  visibility: hidden;
  opacity: 0;
  
  transition: opacity .1s linear, visibility .1s linear .1s;
}

#wrapper.is-visible {
  opacity: 1;
  visibility: visible;
  
  transition: visibility .1s linear, opacity .1s linear .1s;
}

#closer {
  position: absolute;
  top: 10px; left: 10px;
  color: #000;
  background-color: white;
}

#search__input {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  font-size: 24px;
}

<a href="#" id="trigger">Click me.</a>

<div id="wrapper">
  <a href="#" id="closer">Close me.</a>
  <input type="search" placeholder="Search here" id="search__input"/>
</div>