css - 路由器动画在动画时不保留高度

Question

在我的 Angular 元素中，我添加了路由器动画，它们工作正常，除了一个主要的滞后，在我看来，这是由于视口(viewport)在动画关键帧期间失去它的 height: 100% css 设置。

因此，它首先通过绘制当前 View 的缩小版本来替换当前 View ，动画切换到进入 View 的组件的缩小 View ，然后重绘刚刚加载的新 View 它是实际高度值，它会尝试在几毫秒内完成所有这些操作。

如果每个 View 都有一个硬编码的高度(例如:height: 200px，在这种情况下，它不依赖于父级来知道它最终会是什么样子.)，那么动画就不会滞后，因为它只需要绘制它当前拥有的 View 的“向右滑动”帧 + 它正在加载的 View 。

所以确实是 height 属性丢失导致了延迟。

问题是我需要 100% 的高度，因为我用它来获取内容，如果路由器导出上方的内容改变大小时动态调整大小。

我如何才能同时保持 height: 100% 和路由器动画？

Answer 1

如果有其他内容(如页眉或页脚)，相对大小将无法正常工作。如果其他内容具有动态高度，请在路由器转换中尝试以下操作:

style({ position: 'absolute', width: '100%', top: '10%', bottom: '0' })

这样动画应该没有任何延迟。