在我的 Angular 元素中,我添加了路由器动画,它们工作正常,除了一个主要的滞后,在我看来,这是由于视口(viewport)在动画关键帧期间失去它的 height: 100%
css 设置。
因此,它首先通过绘制当前 View 的缩小版本来替换当前 View ,动画切换到进入 View 的组件的缩小 View ,然后重绘刚刚加载的新 View 它是实际高度值,它会尝试在几毫秒内完成所有这些操作。
如果每个 View 都有一个硬编码的高度(例如:height: 200px
,在这种情况下,它不依赖于父级来知道它最终会是什么样子.),那么动画就不会滞后,因为它只需要绘制它当前拥有的 View 的“向右滑动”帧 + 它正在加载的 View 。
所以确实是 height
属性丢失导致了延迟。
问题是我需要 100% 的高度,因为我用它来获取内容,如果路由器导出上方的内容改变大小时动态调整大小。
我如何才能同时保持 height: 100%
和路由器动画?
最佳答案
如果有其他内容(如页眉或页脚),相对大小将无法正常工作。如果其他内容具有动态高度,请在路由器转换中尝试以下操作:
style({ position: 'absolute', width: '100%', top: '10%', bottom: '0' })
这样动画应该没有任何延迟。
关于css - 路由器动画在动画时不保留高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51363701/