Проблема при применении анимации Fade In / Fade Out

Question

У меня есть страница с несколькими кнопками; действие щелчка по ним запускает анимацию постепенного появления / исчезновения. Во время этой анимации некоторые элементы div меняются.

Все работает нормально, однако, до того, как анимация затухания начинается, div исчезает на полсекунды (и выглядит не очень хорошо). Как я могу предотвратить его исчезновение, просто стать невидимым, а затем снова видимым (без каких-либо изменений высоты)? Установка высоты до 100% не помогла.

CSS

.afterClick {
  -webkit-animation: fadeinout 0.6s linear forwards !important;
  animation: fadeinout 0.6s linear forwards !important;
}

@keyframes fadeinout {
  from {
    opacity: 1;
    animation-timing-function: ease;
  }
  50% {
    opacity: 0.5;
    animation-timing-function: ease-in;
  }
  to {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
}

HTML

<a href="#" class="some-class" (click)="setAnimation()">

<div class="afterClick" *ngIf="checkVisiblity == 'Y'">
some contents
</div>

TS

public checkVisiblity = 'Y';

setAnimation() {
  let context = this;
  context.checkVisiblity = 'N';
  setTimeout(function() {
    context.checkVisiblity = 'Y';
  }, 50);
}

Answer 1

Попробуйте добавить animation-fill-mode к классу .afterClick

.afterClick {
  -webkit-animation: fadeinout 0.6s linear forwards !important;
  animation: fadeinout 0.6s linear forwards !important;
  animation-fill-mode: backwards;}