Установка функции тайм-аута на основе задержки анимации - PullRequest
Новая
       9

Установка функции тайм-аута на основе задержки анимации

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

Мне нужно установить .screens равным display: none до момента, когда начнется его анимация.Каждый из них имеет отдельный animation-delay, поэтому я надеюсь, что функция будет проверять длительность задержки анимации, а затем определять длину функции setTimeout.

Пример. Если .screens имеет задержку анимации 3 секунды, затем через 3 секунды я хочу изменить отображение с none на block.

Код функции, которую я написал до сих пор, приведен ниже: 

var screens = document.getElementsByClassName('screen');
for (var i=0;i<screens.length;i++){
    if (screens[i].style.animationDelay >=0){
        setTimeout(function(){
           this.style.display = "block"; 
        }, this.style.animationDelay);
    }
}

Ответы [ 2 ]

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

Вы можете попробовать это.(Вы можете пропустить первую часть, она просто для генерации screens со случайным animationDelay) 

const generateScreens = () => {
  for (let i = 0; i < 5; i++) {
    let el = document.createElement('div');
    el.className = 'screen';
    el.style.animationDelay = Math.floor(Math.random() * 5) + 's';
    document.body.appendChild(el);
  }
}

generateScreens();

// code that you have asked for starts here
const screens = document.getElementsByClassName('screen');
[...screens].forEach(item => {
  const delay = item.style.animationDelay.slice(0, item.style.animationDelay.length - 1);
  setTimeout(() => {
    item.style.display = 'block';
  }, delay * 1000);
});
div.screen {
  width: 40px;
  height: 40px;
  background: red;
  border: 1px solid black;
  display: none;
}
0 голосов
/ 20 мая 2018

Поскольку вы не можете animate состояние / значение от none до block свойства display , вместо этого вы можете сделать это с помощью visibility: hidden/ visibility: visible пара, и, конечно, вы также можете сделать это с opacity: 0 / opacity: 1: 

.screen {
  visibility: hidden;
  animation: animate forwards;
}

.screen:first-child {animation-delay: 1s}
.screen:nth-child(2) {animation-delay: 2s}
.screen:nth-child(3) {animation-delay: 3s}

@keyframes animate {
  to {visibility: visible}
}
<div class="screen">1</div>
<div class="screen">2</div>
<div class="screen">3</div>

Тогда вы можете просто нацелить элементы .screen с помощью селекторов :nth-child или :nth-of-type .

...