Angular 4 使用 angular 动画对任何 height/position 变化进行动画处理

Question

我希望这是一个非常直截了当的问题。有没有办法使用angular动画语法来为元素上的任何高度或位置变化设置动画？

例如，如果移除 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}))])
]);