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

Answer 1

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

Answer 2

Here is the solution I needed

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