パラメータ

Question

私はAngular2アニメーションを使用してい

animate({'left' : left_indent}) 

の下に簡単なjQueryのような単純なアニメーションを作成しようとしているが、問題は、私は私のコンポーネントの外left_indentパラメータを渡す行う方法ですアニメーショントリガーのクラス？

animations: [ 
    trigger('flyInOut', [ 

     state('for', style({ 
      left: this.left_indent, 
     })), 

     transition('* => for', [ 
      animate(2000, keyframes([ 
       style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }), 
      ])) 
     ]), 
    ]) 
] 

Answer 1

これで可能です。

animations: [ 
    trigger('flyInOut', [ 

     state('for', style({ 
      left: '{{left_indent}}', // use interpolation 
     }), {params: {left_indent: 0}}), // default parameters values required 

     transition('* => for', [ 
      animate(2000, keyframes([ 
       style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 
       style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }), 
      ])) 
     ]), 
    ]) 
] 

UPDATE（SplitterAlex回答に応じて）：（角< 4.4.6用）テンプレートの

：

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div> 

角度ため> = 4.4.6テンプレート

なければなりません

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div> 

Answer 2

現在、アニメーションは値の静的な定義のみを許可します。

しかし、これによれば、2016年6月に提起されたgit hub feature requestによれば、計画はありますが、追加する機能のバックログにはまだ表示されているようです。

まだリリースされていません。

Answer 3

私は1つの解決策を持っています。しかし、すでに知っているさまざまなパラメータで同じアニメーションを何回か使用しようとしている場合にのみ役立ちます。

たとえば、slideUp-slideDownエフェクトを作成するために再利用可能なアニメーションがあります。そして、折りたたまれた状態のコンテナは、（私はすでにこれらのコンテナについて知っている）ある程度の高さを保つ必要があります。

アニメーション：コンポーネントのクラスで

import { style, trigger, state, transition, animate } from "@angular/animations"; 

export const slideUpDownAnimation = (height) => { 
    return trigger(`slideUpDownAnimation${height}`, [ 
     state('0', style({ 
      overflow: 'hidden', 
      height: '*' 
     })), 
     state('1', style({ 
      overflow: 'hidden', 
      height: `${height}px` 
     })), 
     transition('1 => 0', animate('400ms ease-in-out')), 
     transition('0 => 1', animate('400ms ease-in-out')) 
    ]); 
}; 

：

import { slideUpDownAnimation } from "../../animations/slide-up-down.animation"; 

@Component({ 
    moduleId: module.id, 
    selector: 'new-order', 
    templateUrl: './new-order.component.html', 
    animations: [ 
     slideUpDownAnimation(32), // will return trigger named "slideUpDownAnimation32" 
     slideUpDownAnimation(60) // will return trigger named "slideUpDownAnimation60" 
    ] 
}) 
export class NewOrderComponent {... 

そしてfinaly、コンポーネントのHTMLで：

<div class="header-fields" 
     [@slideUpDownAnimation32]="collapsedFields"> 
... 

<div class="line-group" 
      *ngFor="let group of lineGroups; let g = index" 
      [@slideUpDownAnimation60]="group.collapsed"> 
... 

あなたはデコレータ& HTMLでそれらを定義しなければなりませんcuzを

は、残念ながらそれは動的パラメータのために使用することはできません。

Answer 4

受け入れられた回答はありません角度4.4の私のためのrk。6

あなたは交換してくださいparams

オブジェクトにテンプレート内のparamの値をラップする必要があります。

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div> 

で：

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>