Question

我有一个自定义的可导航面板，用于显示项目列表。该面板包含一个数据绑定组件，由两个按钮包围，用于导航到上一个和下一个数据。数据绑定组件显示当前活动的数据。现在，我希望在数据对象更改时显示一些动画。我对角度动画不熟悉，因此很难找到适合我的情况的示例。当@Input（）属性值更改时，如何触发动画？

Answer 1

回答您的问题

当@Input（）属性值时，如何触发动画变化吗？

您可以在子组件中具有一个输入属性，

Input() FadeDirection: string = "FadeFromRight";

并使用此输入属性作为状态，将其分配给animation trigger为

[@animatecomponent]="FadeDirection"

，对于一组离散状态，将过渡效果定义为

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

在 https://stackblitz.com/edit/angular-routes-animations

创建的示例

Answer 2

如果您不是在谈论路由器动画，那么我认为您必须使用@Input()设置器和动画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>

动画ts：

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

属性变化的角度动画

2 个答案: