应用淡入/淡出动画时出现问题

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;}