Angular 2 Animieren Höhe-Propery-Timing auf Bindung

Question

Ich hätte gerne eine Komponente, ich nannte es Information-Board, um nach einigen Sekunden weg zu animieren. Ich hatte die Idee, es als Exit-Animation nach oben zu schieben. Mein Ansatz dafür ist ganz einfach, da ich dies mit CSS-Animationen tun kann, um diesen Thread zu: Angular 2 Slide Up and Down Animation

Meine SCSS-Datei sucht ganz einfach:

.info-board { 
    transition: height 1s; 
    overflow: hidden; 
} 

Das Problem stellt sich in dem Satz aus dem erwähnten Thread: Die auf 'auto' eingestellte Höhe kann nicht animiert werden. Das macht Sinn, schätze ich, aber es bereitet mir eine Menge Ärger, weil meine Informationstafel eine gemeinsame Komponente sein sollte und auch erlaubt sein sollte, zu Beginn unsichtbar zu sein, nur wenn etwas Interessantes passiert.

Also, Blick auf meine bauteil html:

<div *ngIf="informationMessage"> 
    <div #contentElement class="info-board" [style.height]="contentHeight"> 
    <alert type="{{alertType}}"> 
     <strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }} 
    </alert> 
    </div> 
</div> 

Nichts Besonderes: Wenn die informationMessage, ein einfaches dto, gesetzt ist, sollte gezeigt werden. Ich stelle die Höhe über die Bindung ein, um sie richtig zu animieren. Jetzt der komplizierte Teil: Wenn die Info-Tafel am Anfang nicht angezeigt wird, muss ich im Grunde darauf warten, dass der dto gesetzt UND der HTML-Wert gerendert wird. Der einzige Haken ich bisher gefunden ist das „afterViewChecked“ ein, zu diesem Kodex führende:

@ViewChild('contentElement') public contentElement: ElementRef; 

    ngAfterViewChecked(): void { 
    this.checkSetBoardSize(); 
    } 

    private checkSetBoardSize() { 
    if (this.contentElement && this.contentElement.nativeElement) { 
     this.contentHeight = this.contentElement.nativeElement.scrollHeight + 'px'; 
    } 
    } 

Diese Veranstaltung ist die einzige, die ich sicher sein kann, dass die ViewChild gesetzt, aber es scheint zu spät zu sein : Da dies der letzte Schritt der Changetracking-Logik ist, wird die eingestellte Höhe ignoriert. Der einzige andere Hook, der hilfreich aussah, war "ngAfterContentChecked", aber in diesem ist ViewChild nicht gesetzt. Ich habe auch keine Möglichkeit gefunden, das Changetracking 'neu zu triggern'. Auch der Ansatz auf Angular 2 @ViewChild in *ngIf mit ViewChildren funktioniert nicht für mich.

Fehle ich irgendeine Möglichkeit? Ich weiß, dass die Arbeit mit den nativenElementen keine gute Idee ist, aber aus meiner Forschung ist es derzeit notwendig, mit Höhen zu arbeiten.

Answer 1

Sie konnten die animation Merkmal von Angular verwenden, das Beispiel für ur Fall kann in der angular docs

Nebenbei bemerkt zu finden: Seien Sie sich bewusst, dass die Nutzung des Animations-Paket (es @angular/animations ausgelagert ist) in abgewinkelte Ausführung ändert >4.0.0-rc.1. Für mehr die changelog von eckigen