是否可以以角度为隐藏属性设置动画？答案

【问题标题】：Is it possible to animate an hidden property in angular?是否可以以角度为隐藏属性设置动画？
【发布时间】：2018-10-31 10:49:59
【问题描述】：

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

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

这是我要制作动画的模板部分：

<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 动画效果更好吗？

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

【问题讨论】：

标签： angular ionic3 angular5

【解决方案1】：

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

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

【讨论】：

感谢您的参考 :) 您是否参考了手风琴 maxHeight 动画
不，但它是纯 CSS 做的工作，所以使用纯 CSS。