Question

我想知道是否可以对隐藏属性进行角度动画处理？还是我必须设置不透明度或高度等动画？

我想在组件上创建一个手风琴动画。

这是我要设置动画的模板部分：

<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/

强烈建议您隐藏，使用可见性。

是否可以对角形的隐藏属性设置动画？

1 个答案: