9

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.

rjustin
  • 1,399
  • 8
  • 19

1 Answers1

9

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}))])
]);
Martin Cremer
  • 5,191
  • 2
  • 32
  • 38
  • I like this suggestion but the :enter and :leave alias only work for elements that are being removed or added from dom (void => *, * => void) so elements just being moved around are not animated. – rjustin Nov 07 '17 at 17:24
  • Not sure if i understand your problem. But if an element folds smoothly, affected elements shift up smoothly. – Martin Cremer Nov 08 '17 at 19:42
  • This is close enough to what I wanted, thank you. This way you are still unable to control the type and duration of the animations on elements passively affected by the elements getting removed but does make the transitions smoother and cosistent. – rjustin Nov 08 '17 at 23:26