Angular 4通过角度动画为任何高度/位置变化设置动画

Question

我希望这是一个很直接的问题.有没有办法使用角度动画语法来动画元素上的任何高度或位置变化？

例如,如果删除了一个DOM元素导致另一个元素向上移动,那么升级是否可以动画而不必设置状态变量？

<div [@positionChange]></div>

或类似的没有状态的东西.

提前致谢.

Answer 1

您可以向所有可能动态删除/添加的子元素添加折叠动画。如果子高度是动画的，容器大小无论如何都是动画的。

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}))])
]);