javascript - Angular 通用 : avoid restarting CSS animations at DOM replacement

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) {}

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