Question

所以我有这个模式，我设计通过复选框输入打开，但问题是我有我的div和部分安排，#yt-modal-cont不能因z-index问题而与我的输入位于同一容器中。所以我使用了javascript：

if(modalToggle.checked === true) {
  oLay.style.display = 'block';}

简单的修复，然而，这不是我的问题。对于动画，我选择的路线是：

#yt-modal-cont {
  animation: fade-before 0.3s ease-out 0s 2 alternate-reverse;
}

@keyframes fade-before {
  0%{opacity:1;}
  100%{opacity:0;}
}

<script>
  var oLay = document.getElementById('yt-modal-cont');
  var modalToggle = document.getElementById('vids');

  function fadein(){
    oLay.style['animation-play-state'] = 'paused';
  }

  function isOpen(){
    if(modalToggle.checked === true) {
       oLay.style.display = 'block';}
       oLay.addEventListener('animationiteration', fadein);
    }
  }
  modalToggle.addEventListener('click', isOpen);
</script>

然后对于结束功能，我将它设置为animation-play-state=running直到结束，但这不相关。我的问题是，javascript似乎正在捕捉第一次迭代的结束 - 并因此添加样式 - 太迟了，因为当模态打开时，它的不透明度略微消失。更奇怪的是，它有时只是;我打开它一次，它有点褪色，我再次打开它，它完全不透明，然后再次，它真的褪色...我尝试将oLay.style.opacity = 1添加到fadein函数尝试覆盖CSS但它仍然是 - 或错过。看完之后

Lag in animated image array

我觉得requestAnimationframe可能就是答案，但是我的js newb-iness使我无法理解那是什么......这是正确的轨道还是有不同的解决方案？

动画创作的延迟

0 个答案: