动态改变高度的 Angular 动画

Question

我已经成功地获得了一个面板，可以在进入和离开 DOM 时为展开和关闭设置动画。问题是我现在在显示详细信息之前在面板内有一个忙碌指示器，动画只在打开忙碌指示器时出现，并在显示详细内容时捕捉。

如何让 Angular 动画根据任何高度变化进行动画处理？

我这里有一个例子:https://stackblitz.com/edit/angular-animation-for-dynamically-changing-height?embed=1&file=src/app/app.component.ts

trigger('expandCollapseDetails', [
    state('void', style({
        'height': '0px',
        overflow: 'hidden'
    })),
    //element being added into DOM.
    transition(':enter', [
        animate('500ms ease-in-out', style({
            'height': '*',
            overflow: 'hidden'
        }))
    ]),
    //element being removed from DOM.
    transition(':leave', [
        animate('500ms ease-in-out', style({
            'height': '0px',
            overflow: 'hidden'
        }))
    ])
])

Answer 1

我编写了一个组件，如果内容发生变化，它可以平滑地为投影内容的高度设置动画。它是这样使用的:

<smooth-height [trigger]="content">
  {{content}}
</smooth-height>

这是一个堆栈 Blitz :https://stackblitz.com/edit/angular4-kugxw7

这是组件:

import {ElementRef, HostBinding, Component, Input, OnChanges} from '@angular/core';
import {animate, style, transition, trigger} from "@angular/animations";

@Component({
  selector: 'smooth-height',
  template: `
    <ng-content></ng-content>
  `,
  styles: [`
    :host {
      display: block;
      overflow: hidden;
    }
  `],
  animations: [
    trigger('grow', [
      transition('void <=> *', []),
      transition('* <=> *', [
        style({height: '{{startHeight}}px', opacity: 0}),
        animate('.5s ease'),
      ], {params: {startHeight: 0}})
    ])
  ]
})
export class SmoothHeightComponent implements OnChanges {
  @Input()
  trigger: any;

  startHeight: number;

  @HostBinding('@grow') grow: any;

  constructor(private element: ElementRef) {}  
              
  ngOnChanges(){
    this.startHeight = this.element.nativeElement.clientHeight;

    this.grow = {
      value: this.trigger,
      params: {startHeight: this.startHeight}
    };
  }
}