当角度SSR引导应用程序时，如何防止CSS动画再次出现

Question

我使用Angular建立了一个登陆站点。为了使其对SEO友好，我必须对其进行预渲染。

着陆页以介绍性动画开始（使用CSS'animation）。

[当我第一次加载页面/完全重新加载时，动画开始，并且在中间引导应用程序，因此ot再次重新启动了动画。

我想知道是否有办法防止动画再次出现。我知道很少有问题可能与我的相似，但是没有一个问题对我有帮助。

我试图通过以下方法解决此问题：

1. 在initialNavigation中添加AppRoutingModule：

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

2. 将TransferHttpCacheModule和BrowserTransferStateModule添加到AppModule，并将ServerTransferStateModule添加到AppServerModule。

Answer 1

您可以做，但是可能不是您要找的答案。

首先让我们看看在浏览器中启动SSR Angular应用程序时会发生什么：

1. 浏览器接收服务器端渲染的页面。 HTML将被渲染，包括动画，然后开始播放。然后在页面底部，解析角度脚本标签，并开始下载该应用程序的JS。

2. [正在下载应用程序时，正在播放动画。

3. 下载该应用程序后，它会进行引导，并在引导时，它会再次渲染整个DOM，包括您的动画。在此过程中，将从DOM中删除旧的动画元素，然后添加新的动画元素。动画第二次开始播放。

您可以通过两种方式解决此问题：

• 要么在应用程序加载到客户端上之前都不启动动画（当应用程序在浏览器中运行时，添加带有自定义类的动画）

• 或将动画移出应用程序，将其手动嵌入到index.html-这样，当SSR重新渲染发生时，它不会受到影响。 （这样，您就不能在<app-root></app-root>元素中包含该元素）

希望这会有所帮助！