时间戳

首页 > 解决方案 > 角度 SSR 在动画元素上闪烁

angular - 角度 SSR 在动画元素上闪烁

问题描述

我有一个带有多个动画的 Angular 7 站点。它们中的大多数开始应用于opacity: 0元素并以 full 结束opacity:1。一切正常。当SSR发挥作用时，就会出现小麻烦。

出于某种原因，我第一次加载网站时，应用程序会像加载两次一样闪烁，但事实并非如此。看起来动画在预渲染时没有被应用，因此有一会儿您会看到所有显示的内容，然后过渡到浏览器状态会使所有内容消失，动画开始照常应用。

如果我导航到任何其他路线（即使它是否延迟加载），它也可以正常工作。正如我所说，它只发生在 Angular 网站首页的第一次加载时。

我已经尝试了很多东西，包括initialNavigation : 'enabled'这里所说的https://github.com/angular/universal-starter/issues/439#issuecomment-331549488，我已经尝试过preboot（https://github.com/angular/universal-starter/ issues/439#issuecomment-331549488），我已经尝试过从服务器到浏览器的 TransferState（请注意，我遇到的问题是静态代码，不涉及 HTTP 调用）。它们都不起作用。

我唯一要尝试的是应用一个'd-none' (display: none)类，如果isPlatformBrowser它是错误的，但我确实认为 a）它似乎是一个 hack，b）我可能会因为被归类为隐藏内容而在 SEO 中得分不佳。

你们有没有遇到过这个并且知道如何在 Angular 6+ 中处理动画和 SSR？

提前致谢。

标签： angularseoserver-side-rendering

解决方案

推荐阅读