Можно ли анимировать скрытое свойство в угловых?

Question

Мне было интересно, можно ли анимировать скрытое свойство в angular? Или я должен анимировать непрозрачность или высоту и т.д.?

Я хочу создать аккордеонную анимацию для моего компонента.

Это часть шаблона, которую я хочу анимировать:

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

Разумно ли с точки зрения производительности использовать *ngIf на элементе аккордеона? Как это:

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

И в компоненте я делаю это:

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

Но это не анимировано правильно, лучше использовать max-height для анимации?

Может ли кто-нибудь помочь мне с этой аккордеонной анимацией?

Answer 1

Здесь у вас есть список анимируемых свойств https://www.quackit.com/css/css3/animations/animatable_properties/

так гарантировано скрыто, используйте видимость.