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

我随后将其导入到我的组件中。（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，但它仍然占据 30 像素。

- Scipion

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

演示

- Teddy Sterne

---

我可以添加默认值吗？ - Scipion

Answer 2

这就是我所需要的解决方案

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

- Scipion

---

这个语法是否有文档记录？如果有多个转换提供值，它会呈现什么样子？ - Sam

你能解释一下“value”的意思吗？你是选择一个状态吗？覆盖特定状态的参数？如果你有不止一个怎么办？ - Simon_Weaver

需要注意的一点是，如果您仅更改属性，则将对象存储在类变量中似乎不会更新，您必须重新分配一个新的对象引用。 - tt9

@Simon_Weaver：value是简单无参数形式的“触发值”：[@someAnim]="foo" => [@someAnim]="{value: 'foo', params: {...}}" - Frank N

像@Sam一样，我也在寻找文档。一个接口会很棒。 - Marcel