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

Question

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

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

此处的问题：用Angular代码替换DOM时，动画重新开始。有没有办法避免这种情况，或者等待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) {}

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