为什么动画不适用于 Angular 中的 [hidden]？

Question

我有两个必须切换的块。

<div [hidden]="isVisible$ | async" [@inOutAnimation]>
<div [hidden]="!(isVisible$ | async)" [@inOutAnimation]>

组件内的动画：

  animations: [
    trigger("inOutAnimation", [
      transition(":enter", [
        style({ height: 0, opacity: 0 }),
        animate("1s ease-out", style({ height: 300, opacity: 1 })),
      ]),
      transition(":leave", [
        style({ height: 300, opacity: 1 }),
        animate("1s ease-in", style({ height: 0, opacity: 0 })),
      ]),
    ]),
  ],

当我更改 isVisible$ 时，divs 也会更改。但是动画不起作用。我做错了什么？

Answer 1

hidden 属性不支持动画，因为它不会在两种状态之间进行任何转换。

我最近遇到了同样的问题并这样做了:

animations: [
    trigger('contentExpansion', [
      state('collapsed', style({height: '0', opacity: 0})),
      state('expanded', style({height: '*', opacity: 1})),
      transition('collapsed <=> expanded', [
        animate('300ms cubic-bezier(0.35, 0, 0.25, 1)')
      ]),
    ]),
],

你可以注意到我使用了 Angular animation states.
在 HTML :

<div class="card-header" (click)="collapsed = !collapsed">

在组件中：

@Input() collapsed: boolean = true;

为什么动画不适用于 Angular 中的 [hidden]？

Why animation does not work for [hidden] in Angular?

angular