如何防止 css 动画在 angular SSR 引导应用程序时再次出现

Question

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

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

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

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

我试图通过以下方式解决这个问题：

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 已呈现，包括您的动画，并开始播放。然后在页面底部，解析 angular 脚本标签，并开始下载应用程序的 JS。

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

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

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

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

• 或者将动画移到应用程序之外，手动将其嵌入到index.html- 这样当 SSR 重新渲染发生时它不会受到影响。（这样你就不能在你的元素里面放<app-root></app-root>元素）

希望这可以帮助！