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

Question

我有一个Directive 我可以添加元素来检查相关元素的当前滚动位置。

看起来像这样：

@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，它允许程序化动画构建。

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

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

  @Input()
  set show(show: boolean) {
    if (this.player) {
      this.player.destroy();
    }

    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+

Answer 2

我根据 this 对 benshabatnoam 的回答中提到的问题的回应使用了一些解决方法。

指令实际上只是没有模板的组件。您可以通过使用属性选择器（例如：[selector]）并制作模板：<ng-content></ng-content>，来创建与指令相同的组件。

因此，您可以像这样创建一个“foux-directive”组件：

@Component({
    selector: '[fadeInAnimation]',
    animations: [
        trigger('fadeIn', [
             transition(':enter', [
                 style({opacity:'0'}),
                 animate(200, style({opacity:'1'}))
             ])
        ])
    ], 
    template: `<ng-content></ng-content>`,
})
export class FadeInDirective {
    @HostBinding('@fadeIn') trigger = '';
}

并像使用任何指令一样使用它：

<div fadeInAnimation> something I want to animate </div>

Answer 3

正如我在您问题的评论部分中提到的那样。

您可以在父组件中进行动画配置。 然后该指令在满足阈值时在其宿主上添加一个类。

在你的指令中，你可以有类似的东西：

@Input() classThatTriggersAnimation = "do-animation";
@HostBinding('[@nameOfAnimation]') animationTrigger = ""; 

// when logic is true
this.animationTrigger = this.classThatTriggersAnimation;

Answer 4

我们开始吧。适用于微小的动画。

我直接使用AnimationPlayer + AnimationBuilder => 无需人为地向前+向后切换状态来触发动画。受this snippet 启发并进一步减少。

import { Directive, Input, HostListener } from '@angular/core';
import { ElementRef } from '@angular/core';
import {
    AnimationPlayer,
    AnimationBuilder
} from '@angular/animations';

@Directive({
    selector: '[clickAnimation]',
})
export class ClickAnimationDirective {
    private player: AnimationPlayer;

    @Input() clickAnimation: any;

    @HostListener('click', ['$event'])
    onClick() {
        // sanitize just in case
        if (this.player) { this.player.destroy(); }

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

        // ensure back-to-original
        player.onDone(() => { player.reset(); });
        player.play();
    }

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

在您的模板中：

<app-button
    [clickAnimation]="trafficLight"
    ...

在你的组件类中：

public trafficLight: AnimationMetadata[] = [
    style({ borderColor: 'red' }),
    animate('400ms ease-in', style({ borderColor: 'yellow' })),
    animate('400ms ease-in', style({ borderColor: 'cyan' })),
    //alternative way to ensure back to original
    // animate('400ms ease-in', style({ borderColor: '*' })), 
];

Answer 5

这是 Angular 的 git 存储库中的 open issue（截至今天 - 28/08/17）。请投票支持此问题，以便向开发人员施加压力以更快地发布此问题。