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