Как реализована анимация появления ссылок меню?

Question

[Иван Симонов]

Здравствуйте!
Как реализована анимация появления ссылок меню на этом сайте https://www.ideo.org/?
При клике на гамбургер меню появляется основное меню с небольшой анимацией.
Смотрел в консоли добавляется transition-delay: 0s, 0s; с шагом + 0.025s
Подскажите как это реализовано?

Answer 1

[Можно просто Евгений]

При document.ready считает сколько там тегов a в контейнере #menu-desktop каждому элементу добавляет стиль "transition-delay: 0s, 0s;", +/- 0.025s, each/item , там используют bootstrap collapse при "shown.bs.collapse" добавляется классы .seen тем же элементам которые добавили и стили "transition-delay"

изначально ссылка имеет стиль
transform: translate(0,3rem);

после добавления классы .seen

transform: translate(0);

и вот вся логика , конечно всё это можно было и по другому сделать :)

Вот даже код :

e.each(function(e, t) {
  var n = e / 40;
  c(t).css("transition-delay", n + "s, " + n + "s")
}),
  
this.menu.container.on("shown.bs.collapse", function() {
  e.addClass("seen")
}).on("hidden.bs.collapse", function() {
  e.removeClass("seen")
}

Answer 2

[Иван Симонов]

Спасибо
Реализовал так

var menuDekstop = $('#menuDesktop');
menuDekstop.find('a').each(function(i) { 
				var elem = $(this);
				console.log(elem);
				setTimeout(function() { 					
					elem.toggleClass('anim');
				}, i * 25); 
			});