Задержка с анимацией - PullRequest
Новая
       2

Задержка с анимацией

0 голосов
/ 29 мая 2018

Итак, у меня есть этот модал, который я спроектировал, чтобы открыть через вход флажка, но проблема с этим состояла в том, что у меня есть мои 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, но он все равно нажал илиМисс.Посмотрев на

Лаг в массиве анимированных изображений

Я чувствую, что requestAnimationframe может быть ответом, но мой js newb-iness делает это так, что я недействительно не понимаю, о чем это все ... Это правильный путь или есть другое решение?

...