change - Parámetro en Animación Angular2

page title angular 4

Question

Estoy tratando de hacer una animación simple como la jQuery simple a continuación

animate({''left'' : left_indent})

Estoy usando las animaciones Angular2, pero el problema es ¿cómo paso el parámetro left_indent fuera de mi Clase de componente al activador de animación?

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

Actualmente las animaciones solo permiten definiciones estáticas de valores.

Sin embargo, de acuerdo con esta solicitud de características de git hub planteada en junio de 2016, hay un plan, pero parece que todavía está en la acumulación de características para agregar.

No ha sido lanzado todavía.

Answer 2

Ahora es posible.

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

ACTUALIZACIÓN (según respuesta SplitterAlex):

en plantilla (para Angular <4.4.6):

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

para Angular> = 4.4.6 la plantilla debe ser

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

Answer 3

La respuesta aceptada no me funciona con Angular 4.4.6

Tienes que envolver los valores param en la plantilla en un objeto params

Reemplazar:

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

Con:

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

Answer 4

Tengo una solución. Pero solo es útil si intenta utilizar la misma animación varias veces con diferentes parámetros que ya conoce.

Por ejemplo, tengo una animación reutilizable para hacer el efecto slideUp-slideDown. Y en estado colapsado, el contenedor debe mantener cierta altura (que ya sé para estos contenedores).

Animación:

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''))
    ]);
};

En la clase de componentes:

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 {...

Y finalmente, en el html del componente:

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

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

Desafortunadamente, no se puede usar para parámetros dinámicos porque debes definirlos en decorator & html.