Angular2 Animation auf eine Komponente

Question

Ich versuche, eine Slide Down/Up-Animation auf eine Komponente anzuwenden, ich habe auch die unten stehende Post gesehen:

https://stackoverflow.com/a/34170712/2755616

Diese Lösung scheint auf einem DIV zu arbeiten, aber in meinem Fall habe ich eine Komponente in einer Seite, die nur angezeigt wird, wenn bestimmte Bedingungen erfüllt sind. Wenn diese Bedingung erfüllt ist, möchte ich, dass die Komponente nach unten gleitet, und wenn sie wieder falsch wird, möchte ich, dass sie gleitet und unsichtbar wird.

Toggle Component

Aber das scheint nicht zu funktionieren, wenn Richtlinien in über Stackoverflow Frage bereitgestellt folgende.

Answer 1

Sie können die Anweisung in der Antwort, die Sie erwähnten, ändern, damit sie eine Eingabe vom Typ boolean und eine Änderung der Eingabe, die Sie anzeigen/ausblenden, für das Element/die Komponente benötigt. plunker with example

@Directive({ 
    selector : '[animate-box]', 
}) 
export class AnimateBox { 
    constructor(private _ab: AnimationBuilder, private _e: ElementRef) {} 

    @Input('animate-box') 
    set animateBox(isVisible: boolean) { 
    let animation = this._ab.css(); 
    // if isVisible is true, animate show. if it's false animate hide 
    ... 
    } 
} 

Und in Ihrer Komponente:

<some-component [animate-box]="isVisible"></some-component> 

Eine Sache im Auge zu behalten ist, dass für die Animation im Plunker um sollte Ihr Element/Komponente zu arbeiten, um eine Anzeige hat, Geben Sie block ein. Aus diesem Grund hat es überhaupt nicht für Sie funktioniert, da die Komponenten standardmäßig haben.