web-dev-qa-db-ja.com

アニメーションAngular2へのパラメーター

以下の単純なjQueryのような単純なアニメーションを作成しようとしています

animate({'left' : left_indent})

私はAngular2アニメーションを使用していますが、問題はコンポーネントクラスの外の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 }),
            ]))
        ]),
    ])
]
angularangular-animations
27
ahrberg

今では可能です。

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

PDATE（SplitterAlexの回答による）：

テンプレート内（Angular <4.4.6）の場合：

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

for Angular> = 4.4.6テンプレートは

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

Angular 4.4.6を使用すると、受け入れられた答えが機能しません。

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

交換：

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

と：

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

解決策が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 {...

最後に、コンポーネントのHTMLで：

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

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

残念ながら、それはデコレータとHTMLで定義する必要があるため、動的パラメータには使用できません。

7
Viktor Sanzharevsky

現在、アニメーションでは値の静的な定義のみが許可されています。

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

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

2
Christopher Moore