Angular 通用SSR CSS 动画转换错误

Question

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

错误错误：由于以下错误无法构建动画：提供的动画属性 "transform" 不受支持 CSS 属性动画提供的动画属性 "transform" 不受支持 CSS 属性动画

原因是一个简单的 Button 和关键帧动画使用了 transform: rotate(0deg); 按钮是圆形的，加载后从右向左滚动。

是否有解决此问题的解决方法？我确信转换对于动画来说是非常有效的 CSS 属性。

编辑：我在组件 scss 文件中使用了转换属性。内容是静态的，组件显示整个站点。 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

Angular 通用SSR CSS 动画转换错误

Angular Universal SSR CSS animation transform Error

css

angular

transform

universal