高さを動的に変更するための角度アニメーション

Question

DOMを出入りするときに、パネルをアニメーション化してアニメーション化することに成功しました。問題は、詳細を表示する前にパネル内にビジーインジケータが表示され、ビジーインジケータを開くためにのみアニメーションが発生し、詳細コンテンツが表示されたときにスナップすることです。

どのように高さを変更しても、アニメーションアニメーションを作成するにはどうすればよいですか？

私はここに例があります：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

私はスムーズにその内容が変更された場合投影コンテンツの高さをアニメーション化するコンポーネントを書きました。それは、このように使われています ：

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

ここplunkerです：https://plnkr.co/edit/MPdoKCxS3rW3t7BIrYR6?p=preview

これはコンポーネントです：

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