in my angular project I added router animations and they work fine except for a major lag which in my view is caused by the viewport loosing it's height: 100% css setting durring the animation keyframes.
as a result it first starts by drawing a scrunched-down version of the current view to replace the current view, animate that switching to a scrunched up view of the component coming into view, then redraw the new view it just loaded with it's actual height value, and it tries to do all that within a couple milliseconds.
If the views each have a hard-coded height (for example : height: 200px, in which case it doesn't depend on the parent to know what it'll look like in the end.), then the animation doesn't lag because then it only has to draw the "sliding to right" frames of the view it currently has + the view it's loading.
so it's really the height property being lost that's causing the lag.
the thing is I need the 100% height as I use that to obtain a content that resizes dynamically if the content above the router-outlet changes size.
how do I get to keep both height: 100% and router-animations?
from router animations not preserving height while animating
No comments:
Post a Comment