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

Question

在我的角度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中的示例。 那么，我应该使用哪些样式来平滑切换内容？

Answer 1

@Inject

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