Question

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

关闭->动画设置->打开

打开->动画设置->关闭

我尝试使用sequence，但我无法使用。这是我的原始代码。

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')]
     ))

样式背景：绿色只是为了查看其是否工作，但是在我运行代码时，序列仅应用时间（2000ms），但样式为空。

Example on stackblitz

谢谢大家。

角度的序列动画

0 个答案: