Is it possible to animate an hidden property in angular?

Question

I was wondering if it is possible to animate an hidden property in angular? Or do I have to animate opacity or height etc?

I want to create an accordion animation on my component.

This is the template part I want to animate:

<ion-row [hidden]="!open">
   <ion-col>
      <ng-content select="[body]"></ng-content>
   </ion-col>
</ion-row>

Is it performance wise logical to use an *ngIf on an accordion toggle item? Like this:

<ion-row *ngIf="open" [@panelInOut]>
   <ion-col>
      <ng-content select="[body]"></ng-content>
   </ion-col>
</ion-row>

And in the component I do this:

animations: [
    trigger('panelInOut', [
        transition('void => *', [
            style({ transform: 'translateY(-100%)' }),
            animate(800)
        ]),
        transition('* => void', [
            animate(800, style({ transform: 'translateY(-100%)' }))
        ])
    ])
]

But this is not animated correctly is it better to use max-height to animate?

Could someone help me out on this accordion animation?

Antoniossss Antoniossss · Accepted Answer · 2018-10-31T10:54:23

Here you have list of animatable properties https://www.quackit.com/css/css3/animations/animatable_properties/

so insteed of hidden, use visibility.

Is it possible to animate an hidden property in angular?

1 Answers