javascript - Angular 2 - 如何在指令上设置动画？

Question

我有一个指令，我可以在元素上放置检查相关元素当前滚动位置的元素。

看起来像这样:

@Directive({
    selector: '[my-scroll-animation]'
})

每当位置满足某个阈值时，我希望该元素使用动画出现在屏幕上。我知道对于 Component 我可以附加一个 animations 属性以及 host 属性中的一些设置来激事件画。

我想要这样的东西:

import { myScrollAnimation } from './animations';

@Directive({
    selector: '[my-scroll-animation]'
    animations: [myScrollAnimation] // <- not possible?
})

如何在指令中实现这一点？

使用:Angular 4.0.0-rc.4

Answer 1

Angular 4.2 带来了大量的动画改进。其中之一是 AnimationBuilder，它允许以编程方式构建动画。

您只需在指令中注入(inject) AnimationBuilder，即可将任何 AnimationMetadata 转换为工作动画。

@Directive({
  selector: '[zetFadeInOut]',
})
export class FadeInOutDirective {

  @Input()
  set show(show: boolean) {
    const metadata = show ? this.fadeIn() : this.fadeOut();

    const factory = this.builder.build(metadata);
    const player = factory.create(this.el.nativeElement);

    player.play();
  }

  constructor(private builder: AnimationBuilder, private el: ElementRef) {}

  private fadeIn(): AnimationMetadata[] {
    return [
      style({ opacity: 0 }),
      animate('400ms ease-in', style({ opacity: 1 })),
    ];
  }

  private fadeOut(): AnimationMetadata[] {
    return [
      style({ opacity: '*' }),
      animate('400ms ease-in', style({ opacity: 0 })),
    ];
  }
}

• Example repository
• A New Wave of Animation Features in Angular 4.2+