javascript - Angular 4 使用 Angular 动画为任何高度/位置变化设置动画

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