用于平滑垂直打开和关闭块的 Angular 2 动画答案

【问题标题】：Angular 2 animations for smoothly vertical opening and closing block用于平滑垂直打开和关闭块的 Angular 2 动画
【发布时间】：2018-05-02 17:47:26
【问题描述】：

在我的 Angular 2 应用程序中，我有带有静态头部和切换容器的组件。我想为打开和关闭内容块添加流畅的动画，但找不到合适的转换。现在我尝试使用这个动画：

trigger('expandableState', [
      transition(':enter', [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('500ms', style({ transform: 'translateY(0)', opacity: 1 })),
      ]),
      transition(':leave', [
        style({ transform: 'translateY(0)', opacity: 1, display: 'none' }),
        animate('500ms', style({ transform: 'translateY(100%)', opacity: 0 })),
      ]),
    ])

但它会移动内容而不是组件的边框。这是plunker 中的示例。那么，我应该使用哪些样式来平滑切换内容？

【问题讨论】：

标签： css angular css-animations

【解决方案1】：

animations: [
trigger('expandableState', [
  transition(':enter', [
    style({ height: '0', opacity: 0 }),
    animate('500ms', style({ height: '*', opacity: 1 })),
  ]),
  transition(':leave', [
    style({ height: '*', opacity: 1 }),
    animate('500ms', style({ height: '0', opacity: 0 })),
  ]),
])
]

我知道高度不支持 GPU，但我认为这是这里唯一的选择。

【讨论】：