Angular Universal SSR CSS动画变换错误

Question

我已将 Angular 通用添加到我的应用程序中，并按照 https://angular.io/guide/universal 上的指南进行操作 这真的很简单，我只是在努力解决这个错误：

ERROR 错误：由于以下错误，无法构建动画：提供的动画属性“transform”不是动画支持的 CSS 属性 提供的动画属性“transform”不是动画支持的 CSS 属性

这样做的原因是一个简单的按钮，它带有一个关键帧动画，它使用了变换：rotate(0deg); 按钮是圆形的，加载后从右侧滚动到左侧。

有什么办法可以解决这个问题吗？我确信 transform 是一个非常有效的动画 CSS 属性。

编辑： 我在组件 scss 文件中使用 transform 属性。内容是静态的，组件显示整个站点。 css代码是这样的：

  .roll-in {  animation: 2s linear 0s 1 animation;
    animation-fill-mode: both;
    }
@keyframes animation {
  0% {
    left: 110%;
  }

  10% {
    transform: rotate(0deg);
    left: 110%;
  }

  100% {
    transform: rotate(-720deg);
    left: 0px;
  }
}

使用 serve:ssr 运行应用后，元素没有动画属性。

Answer 1

我认为，它发生在动画从服务器端渲染本身开始时。由于这是SSR，所以在服务器版本上加载动画没有任何意义。

仅在Browser platform 版本中加载动画。因此，动画只会在页面呈现在浏览器视图中之后开始。例如，

component.ts

import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'my-animated-component',
  templateUrl: './my-animated-component.html'
})
export class MyAnimatedComponent{
  isBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

在标记中

 <div *ngIf="isBrowser">
    <my-animated-component></my-animated-component>
 </div>

建议使用 Angular 原生动画而不是 CSS 动画。一个工作示例在这里：https://stackblitz.com/edit/angular-animate-keyframes