Angular Universal：避免在 DOM 替换时重新启动 CSS 动画

Question

我们有一个以动画开头的网页：coara

出于性能和 SEO 的原因，我们通常使用 Angular Universal 将页面预渲染为静态 HTML。

这里的问题：当 DOM 被 Angular 代码替换时，动画会重新开始。有没有办法避免这种情况，或者等待 DOM 替换直到动画完成（而不是重新开始）？

Answer 1

您可以在 app.module.ts 上添加一个虚假的提供程序以了解组件的呈现位置：

 providers: [
    {
      provide: "isBrowser",
      useValue: true,
    },
  ],

这个导入到你的app.server.module.ts

 providers: [
    {
      provide: "isBrowser",
      useValue: false,
    },
  ],

然后你可以像这样在你的组件上导入这个“提供者”：

constructor(@Inject("isBrowser") public enableAnimations: boolean) {}

现在您可以在服务器端加载组件时禁用动画，并在客户端添加动画。