Анимация исчезновение елемента через keyframes?

Question

Есть анимация на появления элемента сделана через @keyframes Как реализовать когда элемент пропадает из DOM

@keyframes fade {
 from {
  opacity: 0;
  }
  to {
   opacity: 1;
  }
}


.element {
  animation: fade .9s ease;
}

Answer 1

Удалить элемент из DOM только с помощью CSS невозможно. Если вам необходимо просто спрятать элемент, то это можно сделать с помощью вашей же анимации. Как заметил @humster_spb в комментарии, для этого значения свойства opacity нужно поменять местами. Но при этом еще добавить значение forwards для того, чтобы анимация применила значения свойств элемента к моменту ее окончания и не повторялась.

upd. Можно добавить еще свойство visibility и значение hidden, чтобы скрыть элемент без изменения разметки документа.

@keyframes fade {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.element {
  animation: fade 3s ease forwards;
  width: 50px;
  height: 50px;
  background: green;
}

<div class="element"></div>

Удалить элемент из DOM дерева с помощью JavaScript через заданное время, после выполнения анимации:

setTimeout(function() {
  document.querySelector('.element').remove();
}, 3000);

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.element {
  animation: fade 3s ease forwards;
  width: 50px;
  height: 50px;
  background: green;
}

<div class="element"></div>

БЛОГ НА HUSL

Анимация исчезновение елемента через keyframes?

Ответы (1 шт):