Скрытие элемента после перехода 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/ для полного примера.

Я обнаружил, что для работы 2-й шаг должен выполняться асинхронно. Поместите это в setTimeout, и это работает ... вроде. В Chrome работает любое время ожидания (даже 0).
Для Firefox и Edge поведение меняется. Для 100 мс это работает каждый раз. Но на время ожидания, например, 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>