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

Question

我正尝试在 :leave 过渡处为元素设置动画，但我对其行为有点困惑。

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

所以我希望我的动画元素在动画的最后一帧设置最大高度为 15 像素...并留在那里！我可以看到最大高度正在动画化，但最后它被移除，元素缩放到适合其内容的任何高度。很难想象这有什么用，我是不是做错了什么？

更新 - 解决了这个问题

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';
  }
}

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

Final animation state is discarded at end of animation

angular-animations