Выполнение функции спустя время после другой javascript

Question

Я добавляю класс элементу и удаляю другой класс. Надо, чтобы между этими действиями происходил интервал в секунду. Я использовал settimeout, но 2 функция запускается спустя 1 секунду после загрузки страницы. Пример дан ниже. Заранее спасибо за помощь.

function onEntry(entry) {
            entry.forEach(change => {
              if (change.isIntersecting) {
                change.target.classList.add('element-show');
                setTimeout(() => {
                    change.target.classList.remove('element-animation');
                }, 1000);
                   
              }
            });
          }
          let options = { threshold: [0.5] };
          let observer = new IntersectionObserver(onEntry, options);
          let elements = document.querySelectorAll('.element-animation');
          for (let elm of elements) {
            observer.observe(elm);
          }

.green {
        background-color: green;
      }
      .red {
        background-color: red;;
      }
      /* Задаем высоту большим блокам, чтобы у нас на странице получится скролл */
      .element-big  {
        width: 100%;
        height: 1200px;
      }
      .element-animation {
        margin: 2rem 0;
        font-size: 3rem;
        
        /* Скроем элемент в начальном состоянии */
        opacity: 0;
      }
      .element-animation.element-show {
  opacity: 1;
  transition: opacity 1s;
}
.element-animation {
  margin: 2rem 0;
  font-size: 3rem;
  
  /* Скроем элемент в начальном состоянии */
  opacity: 0;
  transform: translateY(100%);
}
.element-animation.element-show {
  opacity: 1;
  transition: all 1s;
  transform: translateY(0%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <div class="element-big green"></div>
        <div class="element-animation">
          <span>Элемент, который появляется</span>
        </div>
        <div class="element-big red"></div>
      </div>
</body>
</html>

Answer 1

Думаю хорошим решением будет комбинация события animationend и функции setTimeout:

const animated = document.querySelector('.animated');

animated.addEventListener('animationend', () => {
  setTimeout(()=> console.log('прошла одна секунда после анимации'), 1000);
});

div.animated {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom,  #cedbe9 0%,#aac5de 17%,#6199c7 50%,#3a84c3 51%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%);
  position: relative;
  animation: mymove;
  animation-duration: 3s;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

<div class="animated"></div>

БЛОГ НА HUSL

Выполнение функции спустя время после другой javascript

Ответы (1 шт):