Как так анимировать меню?

Question

Есть меню, допустим из 5 элементов. Каждому последующему нужно добавлять такой стиль: animation: move 0.3s ease ($num_elem × 0.1s). То есть первому элементу animation: move 0.3s ease 0.1s, второму - animation: move 0.3s ease 0.2s. Нужно, если элементов становится больше, также чтобы у них был номер. Думаю сделать переменные и при посадке в цикле присваивать переменным id элемента меню Как это реализовать?

Answer 1

Назначьте элементам меню id, в цикле for назначайте каждому элементу значение свойства animation с помощью конструкции Element.style и значения переменной цикла i, выбор нужного элемента тоже производится с помощью значения этой переменной, которое подставляется благодаря интерполяции.

Полезная информация для справки: Интерполяция Element.style на MDN

document.addEventListener("DOMContentLoaded", function(){
  for (let i = 1; i < 6; i++) {
    document.querySelector(`#item-${i}`).style.animation = `move 0.3s ease 0.${i}s`
  }
});

<html>
  <body>
    <div class="menu">
      <div class="menu-item" id="item-1"></div>
      <div class="menu-item" id="item-2"></div>
      <div class="menu-item" id="item-3"></div>
      <div class="menu-item" id="item-4"></div>
      <div class="menu-item" id="item-5"></div>
    </div>
</body>
</html>

БЛОГ НА HUSL

Как так анимировать меню?

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