Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?

Question

[Полина Емельянова]

Добрый день, коллеги.
Прошу вас подскажите, как реализовать идею:

САБЖ:
Есть список карточек, часть из них скрыта под display: none;
Подключена библиотека анимаций AOS.
Есть кнопка-ката, типа "Показать все".
По клику надо показать "скрытое" с анимацией и поставить задержку, чтобы карточки появлялись друг за другом.

ПРОБЛЕМА:
Не получается навести анимацию.
Я хотела дергать либу по клику еще раз, но что-то не то делаю.

Прошу, подскажите как переписать код, чтобы работало.

ПЕСОЧНИЦА


ЕСЛИ ГДЕ УЖЕ ЕСТЬ ТАКОЙ ТОСТ - прошу, дайте ссыль... Не по глазам.

Заранее благодарю за помощь.

Comments

[Ankhena]

Что-то такое?

.section__item {
    transform: scaleY(1);
    opacity: 1;
}
.hide{
   //display: none;
  opacity: 0;
  transform: scaleY(0);
}

[Полина Емельянова]

Ankhena, благодарю, что откликнулись. Но не работает... Или я что-то делаю не так.

[Ankhena]

Полина Емельянова, у меня работает. После нажатия на кнопку карточки появляются постепенно по одной.
Или надо не так?

И, конечно, нужно дорабатывать начальное состояние и отступы, потому что видимые карточки тоже появляются таким же образом.

Возможно потребуется разобраться с вот этим

[data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 1;
    transform: translateZ(0);
}

потому что оно может перетирать трансформ из .hide

Answer 1

[VegasChickiChicki]

Песочница не рабочая.

Если объяснять проблему, то суть в том, что браузер видя display: none, который потом, я полагаю, меняется на display: block(допустим), показывает его без анимации. Если вы добавили что-то вроде opacity: 0 -> opacity: 1, анимации все равно не будет, потому что браузер сначала применит opacity, потом display. Браузер пытается запихнуть все изменения свойств стилей как бы в одну пачку операций.

Решение: сначала делаем display, потом, в следующей операции применяем стили анимации.

Как сделать применение стилей анимации в следующей операции? Один из способов - setTimeout(callback, 0);