Задать вопрос
archi_kud
@archi_kud
Frontend Developer
css

Как правильно реализовать анимацию?

Здравствуйте, делаю портфолио и у меня есть сортировка работ по категориям. Хочу сделать, чтобы работы плавно исчезали. Я попытался через dispay: none и opacity: 0, но display не дожидается окончанию opacity, а сразу удаляет элемент из DOM. Но как заставить display дождаться окончания opacity? Использую display, чтобы не было пустых пространств. Если есть другое решение, то буду рад.
  • Вопрос задан
  • 87 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Если речь про CSS-анимации, то да, display: none в большинстве случаев не вариант. Можно вместо него использовать сочетание visibility: hidden и pointer-events: none, а вопрос занимаемого пространства решать уменьшением высоты до 0 к примеру (но это уже зависит от того, что у вас там за анимация, по тексту этого не понять).
Ответ написан
1 комментарий
1 комментарий
hzzzzl
@hzzzzl
можно добавить css класс с opacity: 0; transition: 1000ms opacity; и заодно в компоненте поставить таймер, чтобы через 1000 мс элемент убрался из DOM (return null в рендере), ну например
Ответ написан
Комментировать
Комментировать
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Можно дать последовательную анимацию на jq. Правда, не имея перед глазами проекта, не могу утверждать, что наверняка понял вашу идею. Как вариант:

Ответ написан
Комментировать
Комментировать
@OTCOcity
Использую всегда плагин MixItUp для таких штук - очень простой в использовании и настройке
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend React
Glob-com
от 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Добавить подключениек виртуалке на virtualbox через сайт
24 апр. 2024, в 20:05
20000 руб./за проект
Unity очень простая игра
24 апр. 2024, в 19:51
1000 руб./за проект
Парсинг поисковой выдачи Яндекс
24 апр. 2024, в 19:40
5000 руб./за проект
Ещё заказы