角度通用 SSR CSS 动画转换错误

Question

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

错误 错误：由于以下错误，无法生成动画：提供的动画属性"transform"不是动画支持的 CSS 属性 提供的动画属性"transform"不是动画支持的 CSS 属性

原因是一个简单的按钮，带有使用变换的关键帧动画：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版本中加载动画。因此，动画仅在浏览器视图中呈现页面后才会开始。例如

组件.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