如何将动画从 Angular 切换到 css

Question

我有一个使用@angular/animation 完美地工作的淡入/淡出动画，但我需要将此动画传递给 css 并消除@angular/animation 的这种依赖性

我的动画（我只是在我的div 中传递了[@fadeInOut] 属性并且它可以工作）：

animations: [
    trigger('fadeInOut', [
      state(
        'void',
        style({
          opacity: 0
        })
      ),
      transition('void <=> *', animate(300))
    ])
  ]

我尝试在 css 中执行此操作，但没有成功：

.fadeinout{
  animation: fade 0.3s linear forwards;
}

@keyframes icon-fade-in-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }

}

Answer 1

您应该使用关键帧和 webkit-keyframes 以防浏览器不支持它。我喜欢在我的上创建 20 个步骤，因为我认为它看起来更干净，并且在淡入时不会那么跳跃。

.fade-in {
    -webkit-animation: fade-in .8s steps(20, end) both;
            animation: fade-in .8s steps(20, end) both;
}

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

你可以在这里阅读：

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

在您的函数中，您可以使用 renderer2 - 作为对您的评论的回应，我们就是这样做的并且它有效。我本可以合并这些类，但我们单独测试每个类，以确保它们及时有序地注入到 Dom 中。

 const loading= document.getElementById('loading');
      const signinElement = document.getElementById('signinelement');

    this.renderer.removeClass(signinElement, 'show');
    this.renderer.removeClass(signinElement, 'fade-in');
    this.renderer.removeClass(loading, 'hidden');

    this.renderer.addClass(signinElement, 'hidden');
    this.renderer.addClass(signinElement, 'fade-out');
    this.renderer.addClass(loading, 'show');

    this.renderer.addClass(loading, 'fade-in');
    setTimeout(()=>{
      


  // this.renderer.addClass(signinElement, 'show');
  // this.renderer.addClass(signinElement, 'fade-in');
 
      setTimeout(()=>{
        this.signin.googleSignin();
      }, 500)
     

    }, 500)