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开始时，我可以让身体“压缩”而不是展开？或者我是否必须编写另一个动画函数，例如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)),
  ]),
]

角动画中的多个状态

1 个答案: