web-dev-qa-db-fra.com

Paramètre dans Animation Angular2

J'essaie de faire une animation simple comme la simple jQuery ci-dessous

animate({'left' : left_indent})

J'utilise les animations Angular2 mais le problème est de savoir comment passer le paramètre left_indent en dehors de ma classe de composants au déclencheur d'animation?

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

Maintenant c'est possible.

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

MISE À JOUR (selon la réponse SplitterAlex):

dans le modèle (pour Angular <4.4.6):

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

for Angular> = 4.4.6 template devrait être

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

La réponse acceptée ne fonctionne pas pour moi avec Angular 4.4.6

Vous devez encapsuler les valeurs param dans le modèle dans un objet params

Remplacer:

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

Avec:

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

j'ai une solution. Mais cela n'est utile que si vous essayez d'utiliser plusieurs fois la même animation avec des paramètres différents que vous connaissez déjà.

Par exemple, j'ai une animation réutilisable pour créer un effet slideUp-slideDown. Et dans un état replié, le conteneur doit conserver une certaine hauteur (que je connais déjà pour ces conteneurs).

Animation:

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

Dans la classe du composant:

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

Et enfin, en html du composant:

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

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

Malheureusement, il ne peut pas être utilisé pour les paramètres dynamiques car vous devez les définir dans le décorateur & html.

7
Viktor Sanzharevsky

Actuellement, les animations ne permettent que des définitions statiques des valeurs.

Cependant, selon cette demande de fonctionnalité de git hub soulevée en juin 2016, il existe un plan, mais il semble toujours être dans l'arriéré de fonctionnalités à ajouter.

Il n'a pas encore été publié.

2
Christopher Moore