Angular 4 Animations添加参数

Question

这是我制作的随机动画

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

然后我将它导入我的组件.(animations: [customAnimation] )但是,我想使用新的参数功能:(http://sudheerjonna.com/blog/2017/06/30/angular-4-2-release-an-improved-version-for-animation-包/).

例如,-300将成为一个参数,我会通过以下方式在我的模板元素上调用它:

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

因为我不想使用animation()和useAnimation()我想在特定的dom元素上使用(不使用query()任何一个),我根本没有设法做到这一点.

编辑:

得到它:

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

唯一问题,我不能指定另一个值而不是默认值(-30).我试过了 :

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

和

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

我也试过不指定'或者px它仍然需要30px

Answer 1

你需要top像这样参数化样式:

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

然后在视图中调用它:

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

演示

Answer 2

这是我需要的解决方案

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