Menu
Pretty straight forward question I hope. Is there a way using angular animations syntax to animate any height or position changes on an element?
For example if a DOM element is removed causing another element to shift up, can the shift up be animated without having to set a state variable?
<div [@positionChange]></div>
Or something similar without state.
thanks in advance.
474
However, we can use the style function within transitions and animations to define both the initial styling and also the final one, after the animation has been performed. To use this trigger from our component template we just need to attach it to a component that might get removed or added to the DOM.
Each time an animation is triggered in Angular, the parent animation always gets priority and child animations are blocked. For a child animation to run, the parent animation must query each of the elements containing child animations. It then lets the animations run using the animateChild() function.
Overall, the angular animation framework allows you to create animations that have the same native performance as pure CSS animations. The benefit is that you can easily add and control animations at the component level.” In addition, the ability to run code before and after animation is a plus.
you could just add a fold-animation to all the child elements that might be removed / added dynamicly. If the child height is animated, the container size is animated anyway.
trigger('fold', [
transition(':enter', [style({height: 0, overflow: 'hidden'}), animate('.3s ease', style({height: '*'}))]),
transition(':leave', [style({height: '*', overflow: 'hidden'}), animate('.3s ease', style({height: 0}))])
]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
