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

Мне было интересно, можно ли анимировать скрытое свойство в 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 для анимации?

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

0
0
1 275
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Спасибо за ссылку :) У вас есть ссылка на аккордеон maxHeight анимацию

Sireini 31.10.2018 12:03

Нет, но это именно CSS, поэтому используйте простой CSS.

Antoniossss 31.10.2018 12:08

Другие вопросы по теме