Angular Animation für dynamisch ändernde Höhe

Question

Ich habe erfolgreich ein Panel zu animieren erweitern und schließen beim Betreten und Verlassen des DOM. Das Problem ist, ich habe jetzt eine beschäftigt Indikator im Panel vor der Anzeige von Details, und die Animation tritt nur zum Öffnen der Belegt-Indikator, und schnappt, wenn der Detail Inhalt angezeigt wird.

Wie kann ich die Angular-Animation bei jeder Höhenänderung animieren?

Ich habe hier ein Beispiel: https://plnkr.co/edit/Bs0rwp4ElidR75zN3ulR

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

ich eine Komponente geschrieben haben, die glatt die Höhe des projizierten Inhalt, wenn das Inhaltsänderungen beseelt. ist es wie folgt verwendet:

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

Hier ist ein Plunker: https://plnkr.co/edit/MPdoKCxS3rW3t7BIrYR6?p=preview

Dies ist die Komponente:

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() 
    indicator: any; 

    pulse: boolean; 
    startHeight: number; 

    constructor(private element: ElementRef) {} 

    @HostBinding('@grow') get grow() { 
    return {value: this.pulse, params: {startHeight: this.startHeight}}; 
    } 

    setStartHeight(){ 
    this.startHeight = this.element.nativeElement.clientHeight; 
    } 

    ngOnChanges(){ 
    this.setStartHeight(); 
    this.pulse = !this.pulse; 
    } 
}