动画元素上的角度SSR闪烁

时间:2019-08-23 14:57:41

标签: angular seo server-side-rendering

我有一个带有多个动画的Angular 7网站。他们中的大多数人开始将opacity: 0应用于元素,并以完整的opacity:1结尾。一切正常。当SSR发挥作用时,就会出现小麻烦。

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

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

我尝试了很多事情,包括initialNavigation : 'enabled',如此处https://github.com/angular/universal-starter/issues/439#issuecomment-331549488所示,我尝试了preboothttps://github.com/angular/universal-starter/issues/439#issuecomment-331549488),并且尝试了从服务器到服务器的TransferState。浏览器(请注意,我遇到的问题是静态代码,不涉及HTTP调用)。他们都不起作用。

我唯一要尝试的是如果'd-none' (display: none)为假,则应用isPlatformBrowser类,但是我确实认为a)似乎是hack,b)我可能为此在SEO中得分不高被归类为隐藏内容。

你们是否遇到过这种情况,并且知道如何在Angular 6+中处理动画和SSR?

谢谢。

0 个答案:

没有答案