Demo

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-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" }}) ])。我设法做到了。

修改

使用它：

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

唯一问题是，我无法指定除默认值（-30）之外的其他值。我试过了：

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

和

我也尝试过不指定px或getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);，但仍需要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)}}"

Demo

Answer 2

这是我需要的解决方案

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

Angular 4 Animations添加参数

2 个答案:

Demo