Angular2動畫對組件

Question

我想一個幻燈片下/上動畫應用到組件，我也看到了後下：

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

該解決方案似乎在DIV工作，但在我的情況下，我有一個頁面中的組件，只有在滿足某些條件時纔會顯示。當條件成立時，我希望組件滑下，當它再次變爲假時，我希望它滑動並變得不可見。

切換組件

但這似乎並沒有工作，按照上面的計算器問題提供指導時。

Answer 1

您可以修改您提到的答案中的指令，使其獲取布爾類型的輸入，並更改顯示/隱藏元素/組件的輸入。 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 
    ... 
    } 
} 

而在你的組件：

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

有一點要記住的是，爲了在plunker動畫工作，你的元素/組件應具備的顯示輸入block。這就是爲什麼它首先不適合你的原因，因爲組件默認爲display:inline。