Как сделать так, чтобы элементы меню появлялись на странице постепенно?

Question

[sulau1]

Всех приветствую. Хотелось бы сделать анимацию появления пунктов меню, начиная с последнего. Выезжать они (должны по задумке)слева направо из области, которую не видит пользователь.

Возможно глупый вопрос, но пока сделать самому не получилось.

Answer 1

[Сергей delphinpro]

Как-то так можно, если я правильно понял суть анимации.

<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>

.menu {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.5s ease;
}

.menu.ready {
  transform: translateX(0);
  opacity: 1;
}

const delay = 300;
[...document.querySelectorAll('.menu')].reverse().forEach((menu, index) => {
    setTimeout(() => {
        menu.classList.add('ready');
    }, delay * (index + 1))
});

Comments

[sulau1]

Спасибо вам большое!