组件上的 Angular2 动画

Question

我正在尝试将向下/向上滑动动画应用于组件，我还看到了以下帖子：

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

此解决方案似乎适用于 DIV，但在我的情况下，我在页面中有一个组件，该组件仅在满足特定条件时才会显示。当该条件为真时，我希望组件向下滑动，当它再次变为假时，我希望它向上滑动并变得不可见。

切换组件

但是，当遵循上述 stackoverflow 问题中提供的指南时，这似乎不起作用。

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。