I have a simple layout which consists of two columns (side panel and content) as illustrated in the demo. When the side panel is removed via angulars :leave animation, the other container will stretch to 100% width from 65%. This is done via the fxFlex attribute. What happens here is that when the animation for the side panel starts the content is already stretched to 100% and when the animation finishes content will make an ugly jump.
When I try to animate the transition, animations always runs after the jump or just completely breaks the layout. Same happens if I try to delay the transition via css or directly with timeout in my component.
As an alternative I tried to animate the side panel to zero width. In this case it sorta worked, but the jump still happened, only this time it was during the :enter transition (the animation was completely ignored).
How can I make the transition smooth?
from Animate fxFlex width change after sibling container is removed
No comments:
Post a Comment