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

我有一个

指令

可以放在元素上，检查相关元素的当前滚动位置

看起来像这样：

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

import { myScrollAnimation } from './animations';

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

每当位置满足某个树状结构时，我希望该元素使用动画显示在屏幕上。我知道对于

组件

我可以附加

动画

属性以及

主机

属性中的一些设置来激活动画

@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 })),
    ];
  }
}

我想要这样的东西：

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

import { myScrollAnimation } from './animations';

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

从“/animations”导入{myscrollanation}；
@指示({
选择器：“[我的滚动动画]”
动画：[myScrollAnimation]/正如我在你的问题的评论部分提到的那样

可以在父组件中设置动画配置。
然后，当指令满足阈值时，它只在其主机上添加一个类

在您的指令中，您可以有如下内容：

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

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

这是Angular的git存储库中的一个问题（截至今天-2017年8月28日）。请投票支持这个问题，以便对开发人员施加压力，使其更快地发布此版本。
我根据对benshabatnoam回答中提到的问题的回应，使用了一些变通方法

指令实际上只是没有模板的组件。您可以通过使用属性选择器（例如：
[selector]
）并将模板设置为：
，来创建与指令行为相同的组件

因此，您可以创建“foux指令”组件，如下所示：

@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 = '';
}

@组件({
选择器：“[fadeInAnimation]”，
动画：[
触发器（'fadeIn'[
转换（“：输入”[
样式（{不透明度：'0'}），
动画（200，样式（{不透明度：'1'}））
])
])
], 
模板：``，
})
导出类FadeInDirective{
@HostBinding（'@fadeIn'）触发器=''；
}

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

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

我想制作动画的东西
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 })),
    ];
  }
}




我们开始了。适合小动画。

我直接使用=>不需要人为地前后切换一个状态来触发动画。灵感来自并进一步减少

在模板中：

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

是的，指令没有
动画
，可能是因为每个元素可能有多个指令，并且动画必须以某种方式堆叠。仍然想知道最整洁的方法是什么。如果您只是想为组件创建可重用的动画，您可以创建一个
animation.ts
文件，并在中将其作为动画引用您的组件。重点不是共享动画，而是从指令中触发它们。我相信angular使用css动画（过渡、变换等）。由于指令没有模板和样式，因此您可以实现的最接近的事情可能是更改指令中的类或属性，同时在父组件中具有动画配置。谢谢。这非常有用。但在我的情况下，我正在开发一个插件，这意味着我无法控制父
组件承载模板的Nt
。如果是这种情况，您必须创建一个组件而不是一个指令，该指令可以包含动态内容。您可以查看引导代码，了解它们如何创建模态，您可以在其中传递“内容”。回答得很好。我想应该是
@HostBinding（'@nameOfAnimation'））
。你的解决方案很好。谢谢。但我不明白你为什么不使用Derective decorator？相反，CompononeTirectives不支持动画，所以directive decorator不起作用。你发布的第二个链接是制作指令的一种新方法？伙计，你解决了我的一个大问题！！我问了很多关于angular上的动态动画几乎没有答案。“新浪潮”链接中断，4.2+新闻上的类似替代方案。。。