Как установить масштаб постепенного исчезновения в обратном направлении?

Question

Приветствие. У меня уже есть затухание в анимации. Когда мой диалог или окно открывается, анимация хороша. Однако проблема в том, что этого не происходит, когда анимация выключается нажатием кнопки X. Я хочу, чтобы то, что сейчас происходило при исчезновении, происходило и при исчезновении тоже. Короче говоря, когда мое диалоговое окно появляется, анимация появляется хорошо, но я хочу выйти из диалога, чтобы анимация также уменьшалась. Код:

html

  <div class="modal-dialog">
       any content
       // button which close animation
    <button type="button" class="close" (click)="closeDialog()">
       x
   </button>
 </div>

css

.modal.fade .modal-dialog {
  animation-name: fade-in-scale-animation;
  animation-duration: 0.3s;
}

@keyframes fade-in-scale-animation {
  0%   {transform: scale(0.5); opacity : 0 }
  100% {transform: scale(1); opacity : 1}
}

РЕДАКТИРОВАТЬ:

Проверьте это https://stackblitz.com/edit/angular-66n3nl Я хочу, чтобы анимация закрывалась так же, как и при открытии?

Answer 1

Вы можете применить второй класс, который имеет анимацию, но динамически.

const fadeInOutContainer = document.querySelector('#modal');

const fadeOut = () => {

  fadeInOutContainer.classList.add('fade-out-container');
}

.fade-in-container {
  background: black;
  width: 200px;
  height: 200px;
  
  animation: fade-in 0.3s;
}

.fade-out-container {
  animation: fade-out 0.3s;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

<div class="fade-in-container" id="modal">

   <!-- Content here... -->

</div>

<button onclick="fadeOut()">Fade out</button>

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

Я полагаю, что модальное изображение не будет отображаться после завершения анимации, поэтому я оставляю это с классом. Если это не так, и элемент HTML по какой-либо причине будет переработан, вам следует удалить класс Dynami c позже.

Редактировать по требованию Если вы задаете HTML Элемент с классом, стили которого этот класс будет применен к моменту, когда элемент только что визуализирован.

*. html

<div class="test">Just for the sake of example</div>

*. css

.test { border: 1px solid red; }

Здесь контейнер выше будет иметь красную рамку ко времени загрузки страницы (или отображения контейнера).
Если говорить об анимации, если у нас есть

.test {
   border: 1px solid red;
   animation: anim 1s;
}

@keyframes anim {
   0% { opacity: 0 }
   100% { opacity: 1 }
}

Анимация anim будет запускаться одновременно со стилями, в которых применяется класс test.
Именно поэтому вы не можете применить fade-in-container и fade-out-container к контейнеру в HTML file.

Сначала вам нужно запустить анимацию fade-in (всякий раз, когда контейнер визуализируется), и именно поэтому контейнер определен с этим классом.
Однако вы хотите fade-out анимация для запуска в любое время с событием. Как вы сказали, он должен срабатывать при каждом нажатии кнопки X.
Итак, вам нужно прослушать событие нажатия этой кнопки, а затем запустить анимацию fade-out.

Когда fade-out анимация будет запущена? Всякий раз, когда вы применяете класс fade-out-container к контейнеру.

Итак, чтобы подвести итог, в *. html

<div class="fade-in-container id="modal">
   <!-- Only the fade-in-container class -->
</div>
<button id="btn">Fade out</button>

и скрипт должен выглядеть примерно как *. js

const container = document.querySelector('#modal');
const btn = document.querySelector('#btn');

btn.addEventListener(() => {
   // By adding the class, the animation will be triggered
   container.classList.add('fade-out-container');
});

Надеюсь, это прояснит немного.