是否可以为 angular 中隐藏的 属性 设置动画？

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%)' }))
        ])
    ])
]

但这不是正确的动画，使用最大高度来制作动画更好吗？

有人可以帮我制作这个手风琴动画吗？

Answer 1

这里有动画属性列表 https://www.quackit.com/css/css3/animations/animatable_properties/

所以不要隐藏，使用可见性。