angular - 角度序列动画

Question

我想创建一个具有 3 个状态的简单折叠动画。我正在使用 Angular 7.2.2

关闭 -> 动画 -> 打开

打开 -> 动画 -> 关闭

我尝试使用序列，但我无法做到。这是我的原始代码。

export const collapseAnimation = trigger('collapse', [
  state('open', style({
   opacity: '1',
   display: 'block',
  })),
  state('closed',   style({
    height: '0',
    overflow : 'hidden'
   })),
  state('none',   style({
   opacity: '1'
   })),

 transition('closed => open', animate('200ms ease-in')),
 transition('open => closed', animate('200ms ease-out'))
]);

但我想做这样的事情（在状态关闭和状态打开或打开和关闭之间创建一些内联样式：

   transition('closed => open', 
   sequence(
     [animate('2000ms', style ({background: 'green',overflow : 'hidden'})),
     animate('2000ms ease-in', style ({ opacity: '1',display: 'block'}))]
     )),
   transition('open => closed', 
   sequence(
     [style({ background: 'green',overflow : 'hidden'}),animate('2000ms ease-out')]
     ))

样式背景：绿色是一个示例，只是为了查看它是否工作，但是当我运行代码时，序列仅应用时间（2000 毫秒）但样式为空。

堆栈闪电战示例

谢谢大家。

标签： angularanimation