【问题标题】：Angular 4 Animations add parametersAngular 4 Animations 添加参数
【发布时间】：2017-10-19 12:09:24
【问题描述】：

这是我制作的随机动画

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

唯一的问题，我不能指定默认值 (-30) 以外的其他值。我试过了：

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

和

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

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

【问题讨论】：

标签： angular animation

【解决方案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

【讨论】：

我可以添加一个默认值吗？

【解决方案2】：

这是我需要的解决方案

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

【讨论】：

此语法是否记录在任何地方？如果有多个要为其提供值的转换，这看起来是什么？
你能解释一下“价值”是什么意思吗？你在选择一个州吗？覆盖特定状态的参数？如果你有不止一个呢。
需要注意的一点，将对象存储在类变量中，如果只是更改属性，它似乎不会更新，您必须重新分配新的对象引用
@Simon_Weaver: value 是更简单的无参数形式的“触发值”：[@someAnim]="foo" => [@someAnim]="{value: 'foo', params: {...}}"
像@Sam 我也在寻找文档。一个界面会很棒。