动画Angular2中的参数

Question

我正在尝试制作一个简单的动画，如下面的简单jQuery

animate({'left' : left_indent})

我正在使用Angular2动画，但问题是如何将我的Component Class外的left_indent参数传递给动画触发器？

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: this.left_indent,
        })),

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

Answer 1

现在有可能。

animations: [
    trigger('flyInOut', [

        state('for', style({
            left: '{{left_indent}}', // use interpolation
        }), {params: {left_indent: 0}}), // default parameters values required

        transition('* => for', [
            animate(2000, keyframes([
                style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
                style({ opacity: 1, transform: 'translateX(-300px)', offset: 0.5 }),
            ]))
        ]),
    ])
]

更新（根据SplitterAlex答案）：

在模板中（对于Angular <4.4.6）：

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>

对于Angular> = 4.4.6模板应该是

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>

Answer 2

对于Angular 4.4.6，接受的答案对我不起作用

您必须将param值包装在对象params中的模板中

更换：

<div [@flyInOut]="{value: triggerValue, left_indent: left_indent}"></div>

附：

<div [@flyInOut]="{value: triggerValue, params: {left_indent: left_indent}}"></div>

Answer 3

我有一个解决方案。但是，只有当您尝试使用您已知的不同参数多次使用相同的动画时，它才有用。

例如，我有可重复使用的动画来制作slideUp-slideDown效果。在折叠状态下，容器必须保持一定的高度（我已经知道这些容器）。

动画：

import { style, trigger, state, transition, animate } from "@angular/animations";

export const slideUpDownAnimation = (height) => {
    return trigger(`slideUpDownAnimation${height}`, [
        state('0', style({
            overflow: 'hidden',
            height: '*'
        })),
        state('1', style({
            overflow: 'hidden',
            height: `${height}px`
        })),
        transition('1 => 0', animate('400ms ease-in-out')),
        transition('0 => 1', animate('400ms ease-in-out'))
    ]);
};

在组件的类中：

import { slideUpDownAnimation } from "../../animations/slide-up-down.animation";

@Component({
    moduleId: module.id,
    selector: 'new-order',
    templateUrl: './new-order.component.html',
    animations: [
        slideUpDownAnimation(32), // will return trigger named "slideUpDownAnimation32"
        slideUpDownAnimation(60) // will return trigger named "slideUpDownAnimation60"
    ]
})
export class NewOrderComponent {...

最后，在组件的html中：

<div class="header-fields"
       [@slideUpDownAnimation32]="collapsedFields">
...

<div class="line-group"
           *ngFor="let group of lineGroups; let g = index"
           [@slideUpDownAnimation60]="group.collapsed">
...

不幸的是它不能用于动态参数，因为你必须在decorator和html中定义它们。

Answer 4

目前，动画仅允许静态定义值。

然而，根据2016年6月提出的git hub feature request，有一个计划，但它似乎仍然是积压的功能添加。

它尚未发布。