css转换后隐藏元素

Question

我有一个开始隐藏的元素，然后在单击事件时使用 CSS 转换来设置动画。
我知道display 属性不能动画，所以我要做的是删除应用display:none 的类，然后进行触发css 转换的更改，如下所示：

    popin.classList.remove('hidden') // removes the display:none property
    setTimeout(() => {
        popin.classList.remove('closed') // triggers transition
    }, 10)

完整示例请参见此小提琴：http://jsfiddle.net/wre2674p/6/。

我发现为了工作，第二步必须异步完成。把它放在setTimeout 中，它就可以工作了……有点。在 Chrome 中，任何超时时间都有效（甚至为 0）。
对于 Firefox 和 Edge，行为会有所不同。 100ms，每次都有效。但是对于例如超时10 毫秒，转换可能只有 50% 的时间。由于它会延迟动画，我希望将其保持在尽可能低的水平，同时确保它始终如一地工作。

我怀疑这与将display 属性从none 更改为block 时发生的回流/重绘有关，但我缺乏关于这些主题的详细信息以完全了解正在发生的事情以及如何防止它。有什么想法吗？

Answer 1

从 CSS 和 HTML 中移除隐藏类，从 js 中移除超时。无需显示任何#popin，因为您已经隐藏了溢出。过渡可以直接触发，你把事情复杂化了

document.getElementById('toggle').addEventListener('click', function(e){
	let source = e.currentTarget
  source.disabled = true
	let popin = document.getElementById('popin')
  
  if (popin.classList.contains('closed')){
      popin.classList.remove('closed')
  }
  else{
      popin.classList.add('closed')
  }
  
  setTimeout(() => {
  	source.disabled = false
  }, 850)
})

body{
  overflow: hidden;
}

#popin{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  /*transform: translate(0, 0);*/
  transition: opacity 800ms;
  opacity: 1;
  background: lightgreen;
}

#popin.closed{
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

<button id="toggle">toggle</button>

<div id="popin" class="closed">
  <h1>Popin</h1>
</div>