我使用 Angular 构建了一个登陆站点。为了使其对 SEO 友好，我必须对其进行预渲染。
着陆页以介绍动画开始(使用 CSS 的 animation)。
当我第一次加载页面/完全重新加载时，动画开始，并且在中间引导应用程序，所以 ot 再次重新启动动画。
我想知道是否有办法防止动画再次出现。我知道很少有问题可能与我的类似，但没有一个对我有帮助。
我已尝试通过以下方式解决此问题:
- 在
AppRoutingModule中添加initialNavigation:
@NgModule({
imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabled'})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
- 将
TransferHttpCacheModule和BrowserTransferStateModule添加到AppModule，并将ServerTransferStateModule添加到AppServerModule。
最佳答案
您可以做到，但它可能不是您正在寻找的答案。
首先让我们看看当 SSR Angular 应用程序在浏览器中启动时会发生什么:
浏览器接收服务器端呈现的页面。呈现 HTML，包括您的动画，并开始播放。然后在页面底部解析 Angular 脚本标签，并开始下载应用程序的 JS。
在下载应用时，正在播放动画。
当应用程序被下载时，它会启动，当它启动时，它会再次呈现整个 DOM，包括您的动画。在此过程中，旧的动画元素从 DOM 中移除，然后添加新的动画元素。动画第二次开始播放。
您可以通过两种方式解决这个问题:
要么在应用程序加载到客户端之前不启动动画(当应用程序在浏览器中运行时使用自定义类添加动画)
或者将动画移出您的应用，手动将其嵌入到
index.html- 这样当 SSR 重新渲染发生时它不会受到影响。 (这样你就不能在你的<app-root></app-root>元素中包含该元素)
希望这对您有所帮助!
关于css - angular SSR 引导应用程序时如何防止 css 动画再次出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58278149/