Angular 4 Animations add parameters

Question

Here is a random animation I've made

    import { trigger, animate, transition, style, keyframes} from '@angular/animations';

    export const customAnimation=
        trigger('customAnimation', [
            transition(':leave', [
                style({position: 'relative'}),
                animate("250ms ease-in", keyframes([
                    style({top: 0}),
                    style({top: -300}),
                ]))
            ])
        ])

I am then importing it into my components. (animations: [customAnimation] ) However, I'd like to use the new arguments features : (http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-package/).

By instance, the -300 would become a parameter, and I would call it on me template elements by doing :

<div [@customAnimation]="{pixels: -300}">

Since I don't want to use animation() and useAnimation() as I want to use on specific dom element (not using a query() either) I simply didn't manage to do it.

EDIT:

Got it working with :

export const leavingTowardsTop=
    trigger('leavingTowardsTop', [
        transition(':leave', [
            style({position: 'relative'}),
            animate("250ms ease-in", keyframes([
                style({top: 0}),
                style({top: "{{pixels}}"})
            ]))
        ], {params : { pixels: "-30px" }})
    ])

only issue, I can't specify another value than the default one (-30). I tried :

[@leavingTowardsTop]="{params : { pixels: '-300px' }}"

and

[@leavingTowardsTop]="{ pixels: '-300px' }"

I also tried not specifying the ' or px but it still takes 30px

Perry · Accepted Answer · 2019-08-04 04:13:01Z

22

You need to parameterize the top style like so:

export const customAnimation=
    trigger('customAnimation', [
        transition(':leave', [
            animate("500ms ease-in", keyframes([
                style({'margin-top': "-{{pixels}}px", 'height': "{{pixels}}px", 'margin-bottom': "0px"}),
            ]))
        ], {params : { pixels: "30" }})
    ]);

Then call it in the view like so:

[@customAnimation]="{value: ':leave', params: { pixels: 100}}"

Demo

edited Aug 4, 2019 at 4:13

Perry

3,89326 gold badges40 silver badges51 bronze badges

answered Oct 19, 2017 at 12:36

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scipion Over a year ago

can I add a default value ?

Scipion · Accepted Answer · 2017-11-18 06:41:40Z

12

Here is the solution I needed

[@leavingTowardsTop]="{value: ':leave', params : {topPixels: '-300px'}}"

edited Nov 18, 2017 at 6:41

answered Oct 25, 2017 at 12:29

Scipion

12k23 gold badges82 silver badges154 bronze badges

5 Comments

Sam Over a year ago

is this syntax documented anywhere? what does this look live if there are several transitions to provide values for?

Simon_Weaver Over a year ago

can you explain what 'value' means? are you selecting a state? overriding parameters for a particular state? and what if you had more than just one.

tt9 Over a year ago

One thing to note, store the object in a class variable, it doesn't seem to update if you just change a property, you have to reassign a new object reference

Frank N Over a year ago

@Simon_Weaver: value is the “trigger value” of the simpler parameterless form: [@someAnim]="foo" => [@someAnim]="{value: 'foo', params: {...}}"

Marcel Over a year ago

Like @Sam I am also looking for an documentation. An interface would be great.

Collectives™ on Stack Overflow

Angular 4 Animations add parameters

2 Answers 2

Demo

1 Comment

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Related