最终动画状态在动画结束时被丢弃

Question

我试图在：离开过渡时为一个元素设置动画，我对它的行为感到有点困惑。

trigger('inOut', [
      transition(':enter', [
        style({'max-height': '0'}),
        animate(250, style({'max-height': '150px'}))
      ], { params: { maxHeight: '150px'}}),

所以我希望我的元素动画在动画的最后一帧设置最大高度为15px ......然后离开那里！我可以看到最大高度被动画，但最后它被移除，元素缩放到适合其内容的任何高度。苦苦想象这是如何有用的，我做错了吗？

更新 - 用此解决了它

trigger('inOut', [
      state('void', style({'max-height': '0'})),
      state('*', style({'max-height': '{{maxHeight}}'}), { params: { maxHeight: '0px'}}),
      transition(':enter', animate(300)),
      transition(':leave', animate(250))
    ]),

Answer 1

解决这个问题的一种方法是使用state作为动画的结尾，并使用(@animation.done)来触发此状态。

Here is a StackBlitz example.

app.component.html

<div [@routeAnimations]="state" (@routeAnimations.done)="onDone($event)" class="animate-div">
</div>

app.component.ts

import { trigger, style, state, animate, transition } from '@angular/animations';

@Component({
  animations: [
    trigger('routeAnimations', [
      state('done', style({
        maxHeight: '150px'
      })),
      transition(':enter', [
        style({ 'max-height': '0' }),
        animate(1000, style({ 'max-height': '150px' }))
      ], { params: { maxHeight: '150px' } })
    ])
  ]
})
export class AppComponent {
  state = '';
  onDone(event) {
    this.state = 'done';
  }
}