Есть простая анимация прозрачности, как ее проиграть в обратном порядке

в реактах лучше css transition юзать же, а так создал новую и заработало твой animation.css .show { animation: fade-in 1s; } .hide { animation: fade-out 1s linear; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }

0

09.02.2023

Илья Автор вопроса

Кирилл
в реактах лучше css transition юзать же, а так соз...

у меня так тоже работает, но две почти одинаковые анимации бесят. Либу эту тащить не хочу ради модалок.

0

09.02.2023

Кирилл

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

так не тащи либу, сделай такой кейфрейм дополнительный и не заморачивайся шибко, просто свои преколы реакта типа работает - не трогай, делай более важные дела

0

09.02.2023

Bakhriev

Сделать класс актив, и убирать, не надо кейфреймс использовать для этого, самому элементу задайте opacity:0; transition: opacity 0.2s linear; .show {opacity: 1}, и по клике добавляйте и убирайте этот класс

0

09.02.2023

Илья Автор вопроса

Bakhriev
Сделать класс актив, и убирать, не надо кейфреймс ...

Тут момент чтобы сделать штуку универсальную. Например мне нужно чтобы бэкграунд появился, а с небольшой задержкой появлялись элементы. В момент появления транзишн отработает как надо, а вот когда надо будет скрывать элементы, все сломается. Плюс хочется сделать так чтобы минимум ксс писать на каждый нужны элемент. Тут класс добавил и анимация проигралась. Видимо есть какая-то проблема с фиксацией этих анимированых свойств. forwards типа проигрывает анимацию и фиксирует свойство. А анимация закрытия видимо не видит это свойство или я хз вообще в чем там проблема может быть.

0

09.02.2023

Bakhriev

Илья
Тут момент чтобы сделать штуку универсальную. Напр...

Я понял, тоже пробовал такое делать но без успеха

0

09.02.2023