Question

我有一个列表，其中的项目具有这样的动画：

<li @animation>

这是我的动画触发器：

trigger('animation', [
  transition(':enter', [
    style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),  // initial
    animate('0.5s',
      style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'}))  // final
  ]),
  transition(':leave', [
    style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', opacity: 1}),  // initial
    animate('0.5s',
      style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0', opacity: 0}))  // final
  ])
])

我如何有条件地为特定项目打开/关闭此动画？实际上，我正在寻找某物。像这样：

<li [@animation]=item.isAnimated>

这根本不起作用。

不幸的是，Angular文档中只有一句话：

对于进入或离开页面的元素（从页面插入或删除） DOM），则可以使动画有条件。例如，使用* ngIf 和HTML模板中的动画触发器。

但是当我将动画注释与* ngIf结合使用时，未动画化的项目显然根本不会显示：

<li *ngIf="item.isAnimated" @animation>

无论isAnimated标志如何，我都希望进一步显示所有项目。我只想打开/关闭特定项目的动画。

Answer 1

根据Angular IO：

为true时，特殊的动画控件绑定@ .disabled绑定可防止渲染所有动画。在元素上放置@ .disabled绑定以禁用元素本身上的动画以及该元素内的所有内部动画触发器。

以下示例显示了如何使用此功能：

@Component({
    selector: 'my-component',
    template: `
    <div [@.disabled]="isDisabled">
        <div [@childAnimation]="exp"></div>
    </div>
    `,
    animations: [
        trigger("childAnimation", [
            // ...
        ])
    ]
})
class MyComponent {
      isDisabled = true;
  exp = '...';
}

当@ .disabled为true时，它将阻止@childAnimation触发器以及任何内部动画进行动画处理。

Answer 2

要澄清：如果输入或：输入和：离开关键字可以对组件进行动画处理离开。听起来很简单，但这恰恰是您的方法和要达到的目标的问题。不仅仅是动画，如果您希望dom中有一个新元素更加个性化，那么您就需要自己的状态，这可以由您自己在列表条目的ngOnInit和ngOnDestroy中进行控制。

一种方法可能如下：

trigger('animation', [
  state('invisible', style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),
  state('visible', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'})
  transition('invisible => visible', animate('0.5s'))
  transition('visible => invisible', animate('0.5s'))
])

private readonly isAnimated: boolean = false/true //Where ever you get this value.
public animationState: string //Or Enum with visible/invisible.

public ngOnInit(): void {
  if (this.isAnimated) {
    animationState = 'visible'
  }
}

public ngOnDestroy(): void {
  if (this.isAnimated && this.animationState === 'visible') {
    animatoinState = 'invisible'
  }
}

<li [@animation]="state"/>

如果这种方法还有其他疑问或问题，请告诉我，我们可以进行调整和讨论：）

如何在Angular中有条件地动画：enter和：leave过渡？

2 个答案: