Angular在属性改变时如何实现动画

Question

我有一个自定义的可导航面板，用于显示一组项目。该面板包含一个数据绑定组件，以及两个用于导航到上一个和下一个数据的按钮。数据绑定组件显示当前活动的数据。现在，当数据对象更改时，我希望显示一些动画效果。我对Angular动画不熟悉，并且很难找到适合我的场景的示例。如何在@Input()属性值更改时触发动画？

- Victor Mukherjee

Answer 1

如果你不是在谈论路由器动画，那么我认为你需要使用一个@Input() setter和动画done函数来维护动画状态。这里有一个示例https://stackblitz.com/edit/angular-lmmixg。

子组件ts：

  @Input() set data(data: any) {
    this.dataState = 'entering';
    this._data = data;
  }

  get data() { return this._data };

  _data: any;

  dataState: 'entering' | 'done' = 'done';

子组件的 HTML：

<div [@dataChange]="dataState" (@dataChange.done)="dataState = 'done'">{{ data }}</div>

动画时间轴：

export const dataChange: AnimationTriggerMetadata = trigger('dataChange', [
    transition('done => entering', [
        style({
            'margin-left': '90%'
        }),
        animate('200ms ease',
            style({ 'margin-left': '*' }))
    ]),
]);

- Frederick

Answer 2

回答你的问题：

当@ Input（）属性值更改时，如何触发动画？

您可以在子组件中拥有一个输入属性，如下所示：

Input() FadeDirection: string = "FadeFromRight";

并将此输入属性用作状态，分配给动画触发器，如下所示：

[@animatecomponent]="FadeDirection"

对于一组离散状态，将转换效果定义为

transition('void => FadeFromRight', [ ... ])

示例创建于 https://stackblitz.com/edit/angular-routes-animations

- Saksham