Параметр в анимацию 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 }),
            ]))
        ]),
    ])
]

Ответ 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 }),
            ]))
        ]),
    ])
]

ОБНОВЛЕНИЕ (согласно ответу SplitterAlex):

в шаблоне (для Angular < 4.4.6):

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

для Angular >= 4.4.6 шаблон должен быть

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

Ответ 2

Принятый ответ не работает для меня с Angular 4.4.6

Вы должны обернуть значения param в шаблоне в объекте params

Заменить:

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

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

Ответ 3

У меня есть одно решение. Но это полезно, только если вы пытаетесь использовать одну и ту же анимацию несколько раз с разными параметрами, которые вы уже знаете.

Например, у меня есть многоразовая анимация для создания эффекта 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.

Ответ 4

В настоящее время анимация допускает только статические определения значений.

Однако в соответствии с этим git запрос функции хаба, поднятый в июне 2016 года, есть план, но он по-прежнему остается включенным отставание функций для добавления.

Он еще не выпущен.