Angular 4 动画添加参数

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

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

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

然后像这样在 View 中调用它:

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

Demo