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

Issue

I have a two block that must toggle.

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

And animation inside component:

  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 })),
      ]),
    ]),
  ],

When I change isVisible$ the divs are changed. But animation does not work. What did I do wrong?

Solution

The hidden attribute does not support animations, since it doesn't make any transition between the two states.

I recently faced the same issue and did this :

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)')
      ]),
    ]),
],

You can notice I used Angular animation states.
In the HTML :

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

In the component :

@Input() collapsed: boolean = true;

Answered By - iPPle