css - 用于平滑垂直打开和关闭 block 的 Angular 2 动画

Question

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

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 中的示例.那么，我应该使用什么样式来平滑切换内容？

Answer 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 不支持高度，但我认为这是这里唯一的选择。