条件2でアニメーションを条件付きで追加する方法

Question

フィールドを持つフォームコンポーネントがあります。フォームに表示されるときにアニメーション化するフィールドがありますが、すべてのフィールドではありません。他の属性と

<div *ngFor="let field of form.Fields"> 
    <div [ngSwitch]="field.Type" [@slideOut]> 
     <!-- more field stuff --> 
    </div> 
</div> 

私はこの[attr.required]="field.Required"ような何かを行うことができますが、動作するように[attr.@slideOut]いないようです。

理想的には、自分のフィールドにアニメーションプロパティを設定したいので、このようなアニメーションを渡すことができますが、[@field.Animation]のようなものを渡すことができます。何か案は？

Answer 1

私は同様の問題を抱えており、少し異なるアプローチをとる必要があることを発見しました。

角では、アニメーションは状態にリンクされています。そのため、HTMLでアニメーションに異なるトリガーを定義する代わりに、トリガーがコンポーネントクラスで監視できる複数の状態を定義する必要があります。また、メソッドから直接アニメーションをトリガーするのではなく、アニメーションがリンクされているオブジェクトの状態を設定します。

たとえば、必要なモジュールをインポートした後、コンポーネントデコレータで次のように定義することがあります。

@Component({ 
    selector: 'app-some-animated', 
    templateUrl: './some.component.html', 
    styleUrls: ['./some-animated.component.scss'], 
    animations: [ 
    trigger('flyInOut', [ 
     transition("void => fly", [ 
     animate(300, keyframes([ 
      style({transform: 'translateX(100%)', opacity: 0}), 
      style({transform: 'translateX(0)', opacity: 1}) 
     ])) 
     ] 
    ) 
    ]), 
    trigger('flyInOut', [ 
     transition("void => fade", [ 
      animate(300, keyframes([ 
      style({opacity: 0}), 
      style({opacity: 1}) 
      ])) 
     ] 
    ) 
    ]) 
    ] 
}) 

このインスタンスでは、要素がインスタンス化されるとすぐにアニメーションが作成されます。また、ngOnInit（）メソッドでthis.watchMeを "fly"または "fade"に設定しています。あなたはおそらく、あなたのフィールドオブジェクトにしたり、* ngForから反復可能な条件として必要な状態を追加したい、あなたの場合は

<div [@flyInOut]="watchMe"> 
    Some content... 
</div> 

：私はそうのようなflyInOutトリガーを取り付けていますHTMLで

。

This article coursetroからは素晴らしい説明とビデオもあります。