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

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,但我认为这是唯一的选择.