web-dev-qa-db-ja.com

Angular 2-ディレクティブにアニメーションを設定するにはどうすればよいですか？

問題の要素の現在のスクロール位置をチェックする要素を配置できる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

javascriptangulartypescriptangular4
9
Nicky

Angular 4.2は、多くのアニメーションの改善をもたらしました。それらの1つは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 })),
    ];
  }
}
13
Tomasz Kula

Benshabatnoamの回答に記載されている問題への this 応答に基づいて、少し回避策を使用しました。

ディレクティブは、実際にはテンプレートのない単なるコンポーネントです。属性セレクターを使用して、ディレクティブと同じように機能するコンポーネントを作成できます（例：[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>
5
Benjamin Kindle

これは、Angular gitリポジトリの 未解決の問題 （今日は-28/08/17）です。開発者にこれをより早くリリースするよう圧力をかけるために、この問題に投票してください。

2
benshabatnoam

あなたの質問のコメントセクションで述べたように。

親コンポーネントでアニメーション設定を行うことができます。次に、ディレクティブは、しきい値を満たしたときにホストにクラスを追加するだけです。

ディレクティブでは、次のようなものを使用できます。

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

// when logic is true
this.animationTrigger = this.classThatTriggersAnimation;
2
Miguel Felipe Guillen Calo