Question

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

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

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

切换组件

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

Answer 1

您可以在您提到的答案中修改指令，使其输入类型为boolean的输入，并在更改输入时显示/隐藏元素/组件。 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。

组件上的Angular2动画

1 个答案: