动画Angular2中的参数

Posted 2023-03-06

【中文标题】动画Angular2中的参数

【英文标题】：Parameter in to Animation Angular2

【发布时间】：2017-06-17 10:14:00

【问题描述】：

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

animate('left' : left_indent)

我正在使用 Angular2 动画，但问题是如何将组件类外部的 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 ),
            ]))
        ]),
    ])
]

【参考方案1】：

接受的答案不适用于 Angular 4.4.6

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

替换：

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

与：

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

【讨论】：

没关系，我错了。你是最初指出这个细节的人，然后更新了接受的答案

【参考方案2】：

现在可以了。

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

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

对于 Angular >= 4.4.6 模板应该是

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

【讨论】：

尝试了这种方法但没有成功，您可以指出将输入值传递给动画库的任何文档吗？如此尖端的功能，没有找到任何东西。

@ChristopherMarshall，首先，这些功能适用于角度动画 > 4.2。有好导游yearofmoo.com/2017/06/new-wave-of-animation-features.html

感谢您的资源。

上例中的“triggerValue”是什么？

@theOwl，triggerValue 是组件中的一个属性，它可以在 AnimationTriggerMetadata 中以某种状态声明值。在这种情况下，它可以等于“for”。当 triggerValue 改变时，例如从 'someValue' 到 'for' ('* => for')，动画发生

【参考方案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: `$heightpx`
        )),
        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">
...

很遗憾，它不能用于动态参数，因为您必须在装饰器和 html 中定义它们。

【讨论】：

谢谢你，伙计。这不是动态的，但至少是 angular 2 的解决方法

谢谢！它拯救了我的一天。不是完全动态的，但仍然能够自定义并完成任务。

目前这只是一个好的答案。如果你想使用 *ngIf 的默认动画值只是一种方法。它的angular8，他们仍然没有解决这个问题。 github.com/angular/angular/issues/19866

对于构建应用程序，我需要将 const slideUpDownAnimation = (height) => 更改为 function slideUpDownAnimation (height)

【参考方案4】：

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

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

它还没有发布。