Angular Universal SSR CSS动画转换错误

Question

我已将Angular Universal添加到我的应用中，并遵循了https://angular.io/guide/universal上的指南这真的很简单，我只是在为这个错误而苦苦挣扎：

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

原因是一个简单的Button，它带有使用以下转换的关键帧动画：rotate（0deg）;该按钮是圆形的，加载后会从右侧滚动到左侧。

是否有解决此问题的解决方法？我敢肯定，转换对于动画来说是相当有效的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