Parameter in to Animation Angular2

Question

I'm trying to make a simple animation like the simple jQuery below

animate({'left' : left_indent})

I'm using the Angular2 Animations but the problem is how do I pass the left_indent parameter outside my Component Class in to the animation trigger?

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

EvgenyV · Accepted Answer · 2017-12-13T13:28:34.453

77

Now it's 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 }),
            ]))
        ]),
    ])
]

UPDATE (according to SplitterAlex answer):

in template (for Angular < 4.4.6):

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

for Angular >= 4.4.6 template should be

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

edited Dec 13 '17 at 13:28

answered Sep 01 '17 at 15:41

EvgenyV

1,226
14
28

Tried this approach with no success, any documentation you can point to around passing in input values to animation lib? Such a cutting edge feature, not finding anything. – Christopher Marshall Sep 15 '17 at 19:05
2

@ChristopherMarshall, first of all this features works in angular-animation > 4.2. There is good guide https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html – EvgenyV Sep 17 '17 at 17:34
Thanks for the resource. – Christopher Marshall Sep 18 '17 at 14:27
1

What is "triggerValue" in the above example? – theOwl Aug 07 '19 at 18:28
@theOwl, triggerValue is a property in your component which can have value declared in some state in your AnimationTriggerMetadata. In this case it can be equal 'for'. When triggerValue changes e.g. from 'someValue' to 'for' ('* => for'), animation occurs – EvgenyV Aug 08 '19 at 19:26
You know where I can find the typings for the options object? I would like to define the object inside my component. – muuvmuuv May 13 '20 at 19:44

score 16 · Answer 2 · edited Dec 26 '17 at 17:34

16

The accepted answer doesn't work for me with Angular 4.4.6

You have to wrap the param values in the template in an object params

Replace:

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

With:

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

edited Dec 26 '17 at 17:34

random_user_name

25,694
7
76
115

answered Oct 27 '17 at 08:08

SplitterAlex

2,755
2
20
23

never mind, I was wrong. You were the guy that originally pointed this detail and then the accepted answer was updated – Aug 24 '18 at 16:32

score 7 · Answer 3 · answered Jun 16 '17 at 22:04

i have one solution. But it is helpful only if you are trying to use same animation several times with different parameters that you already know.

For example, i have reusable animation for making slideUp-slideDown effect. And in collapsed state container must keep some height (that i already know for these containers).

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

In component's class:

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

And finaly, in component's html:

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

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

Unfortunately it can not be used for dynamic parameters cuz you must define them in decorator & html.

thank you mate. This is not dynamic but at least is a workaround for angular 2 — yngrdyn, May 03 '18 at 09:07
thanks ! it saved my day. Not fully dynamic but still able to customized and get things done. — Abhinav Kumar, Sep 08 '19 at 08:18
For now it's only good answer. If you want use default animation value with *ngIf is only one way. Its angular8 and they still didnt fix this. https://github.com/angular/angular/issues/19866 — Verri, Sep 12 '19 at 09:18
For build app i need change `const slideUpDownAnimation = (height) => ` to `function slideUpDownAnimation (height)` — Verri, Sep 13 '19 at 07:38

score 3 · Answer 4 · answered Feb 01 '17 at 11:46

3

Currently animations only allow for static definitions of values.

However, according to this git hub feature request raised in June 2016, there is a plan but it appears to still be on the backlog of features to add.

It hasn't been released yet.

answered Feb 01 '17 at 11:46

Christopher Moore

3,071
4
30
46

Parameter in to Animation Angular2

4 Answers4

Linked

Related