Angular 动画中的多个状态

Question

我有以下动画：

export function ExpandAnimation(): AnimationTriggerMetadata {
  return trigger('ExpandAnimation', [
    state('false', style({height: '0px'})),
    transition('false => true', [animate('0.6s ease-in-out', style({height: '*'}))]),
    transition('false => true', [animate('0.6s ease-in-out', style({height: '*'}))])
  ]);
}

我是否可以为其添加另一个状态，以便在从 true => false 开始时，我可以拥有主体 "compress" 而不是展开？或者我是否必须编写另一个动画函数，例如 CompressAnimation() 。

我在想这样的事情：

export function CompressExpandAnimation(): AnimationTriggerMetadata {
  return trigger('CompressExpandAnimation', [
    state('false', style({height: '0px'})),
    transition('false => true', [animate('0.6s ease-in-out', style({height: '*'}))]),
    transition('false => true', [animate('0.6s ease-in-out', style({height: '*'}))])

    state('true', style({height: '*'})),
    transition('true => false', [animate('0.6s ease-in-out', style({height: '0px'}))]),
    transition('true=> false', [animate('0.6s ease-in-out', style({height: '0px'}))])
  ]);
}

Answer 1

我不知道为什么你的转换是重复的，但是是的，你只需要添加一个状态来扩展或减小 div 的高度。

这是您可以使用的简单动画：

export const CompressExpandAnimation = [
  trigger('CompressExpandAnimation', [
    state('true', style({ 'height': '*' })),
    state('false', style({ 'height': '0px' })),
    transition('* => *', animate(700)),
  ]),
]

Angular 动画中的多个状态

Multiple States in Angular Animation

angular

angular-animations