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

Question

[Артур Кудашев]

Здравствуйте, делаю портфолио и у меня есть сортировка работ по категориям. Хочу сделать, чтобы работы плавно исчезали. Я попытался через dispay: none и opacity: 0, но display не дожидается окончанию opacity, а сразу удаляет элемент из DOM. Но как заставить display дождаться окончания opacity? Использую display, чтобы не было пустых пространств. Если есть другое решение, то буду рад.

Answer 1

[Ivan Bogachev]

Если речь про CSS-анимации, то да, display: none в большинстве случаев не вариант. Можно вместо него использовать сочетание visibility: hidden и pointer-events: none, а вопрос занимаемого пространства решать уменьшением высоты до 0 к примеру (но это уже зависит от того, что у вас там за анимация, по тексту этого не понять).

Comments

[Артур Кудашев]

@sfi0zy

@keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
}

Answer 2

[hzzzzl]

можно добавить css класс с opacity: 0; transition: 1000ms opacity; и заодно в компоненте поставить таймер, чтобы через 1000 мс элемент убрался из DOM (return null в рендере), ну например

Answer 3

[Антон Усачев]

Можно дать последовательную анимацию на jq. Правда, не имея перед глазами проекта, не могу утверждать, что наверняка понял вашу идею. Как вариант:

Answer 4

[OTCOcity]

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