組件上的Angular2動畫

Question

我正在嘗試將“向下/向上滑動”動畫應用於組件，我也看到了以下帖子：

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

此解決方案似乎可以在DIV上使用，但就我而言，我在頁面中有一個組件，該組件僅在滿足某些條件時才顯示。 當該條件為true時，我希望組件向下滑動，而當它再次變為false時，我希望它向上滑動並變得不可見。

切換組件

但是，當遵循上述stackoverflow問題中提供的指南時，這似乎不起作用。

Answer 1

您可以在提到的答案中修改指令，以使其接受布爾類型的輸入，並在更改輸入后顯示/隱藏元素/組件。 例子

@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>

要記住的一件事是，為了使松節器中的動畫正常工作，您的元素/組件應顯示為block類型。 這就是為什么它最初對您不起作用的原因，因為組件默認情況下具有display:inline 。