我在使用.focus()函数和CSS过渡时遇到了javascript怪异的问题。

请参阅下面的jsFiddle。

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

直到...我使用CSS过渡使其平滑(在opacityvisibility属性上),它才有效。

有什么想法可能来自这个问题吗?

提前致谢!



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>

最佳答案

之所以会发生这种情况,是因为隐藏的,未显示的元素或不透明的元素无法被聚焦,而在过渡时,您的元素也无法被聚焦。

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>

10-05 20:53
查看更多