我正在尝试使用带有路由器动画的Angular 8设计一个网站。我已经导入了BrowserAnimationsModule，我确实看到动画在某种程度上工作。
我还使用 Angular 路由器的scrollPositionRestoration来确保当用户单击链接查看新页面时，会显示新页面的顶部而不是之前的滚动位置。
但是，当路由器将新组件加载到视图中时，它会在应用路由器动画时突然将整个窗口滚动到最顶部。我尝试禁用scrollPositionRestoration属性，它确实摆脱了烦人的滚动，但是我的新页面加载在以前的滚动位置而不是顶部。
这是一个松弛的闪电战，展示了我的问题：https://stackblitz.com/edit/angular-xpadeg。
要重现问题，请转到"关于"页面，向下滚动，然后单击"主页"链接，动画执行时将显示突然滚动。
有几个问题需要克服：
-
在动画过程中，上一页和下一页都保留在屏幕上，但高度可能不同
-
下一页立即进行滚动恢复
-
当从 DOM 中删除上一页时，窗口高度会突然变化(您会注意到滚动条高度突然缩小/增长(
不幸的是，我之前经历过这种情况，解决方案涉及禁用scrollPositionRestoration，收听NavigationStart, NavigationEnd, popstate，从"缓存"(页面和位置的Map(手动应用滚动位置，以及在动画开始时将position: fixed应用于上一页(以使其保持在原位而不受动画期间下一页位置恢复的影响(
说实话，不值得付出努力。我认为您最好在页面加载时在页面内容本身上应用fade in类型的组件动画。您可以以这种方式启用scrollPositionRestoration，而不必处理导航事件
在我看来，路由器动画应该只在所有页面都是固定高度时使用