Angular动画多状态实现：能否在现有动画中添加收缩状态？

完全不需要单独编写两个动画函数，你只需要在同一个trigger里补充从true到false的过渡定义就能实现双向的展开/收缩效果。不过你自己写的示例代码里有几个小问题需要修正：

• 重复定义了相同的transition（比如两次false => true），这完全没必要，只会造成代码冗余
• 存在语法错误：state('true')前面缺少逗号，还有transition('true=> false')里的箭头前后应该加空格
• 建议在收缩状态加上overflow: 'hidden'，不然元素内容会在高度为0时仍然暴露出来，影响视觉效果

修正后的完整实现 #

import { trigger, state, style, animate, transition, AnimationTriggerMetadata } from '@angular/animations';

export function CompressExpandAnimation(): AnimationTriggerMetadata {
  return trigger('CompressExpandAnimation', [
    // 收缩状态：高度为0，隐藏溢出内容，可选清除padding避免留白
    state('false', style({
      height: '0px',
      overflow: 'hidden',
      paddingTop: '0',
      paddingBottom: '0'
    })),
    // 展开状态：使用元素的自然高度，恢复原有padding
    state('true', style({
      height: '*',
      overflow: 'visible',
      paddingTop: '1rem',
      paddingBottom: '1rem'
    })),
    // 简洁的双向过渡写法：同时匹配展开和收缩两个方向
    transition('false <=> true', [animate('0.6s ease-in-out')])
  ]);
}

关键说明 #

1. 双向过渡语法：用false <=> true可以同时匹配false→true和true→false两个方向的状态切换，比分开写两个transition更简洁高效
2. overflow处理：收缩时必须设置overflow: hidden，否则元素内部的内容会突破高度限制显示出来，破坏收缩的视觉效果
3. padding适配：如果你的元素有默认padding，建议在收缩状态把padding设为0，避免出现不必要的留白，展开时再恢复原有值

使用方式 #

在组件模板里绑定这个动画触发器，配合一个布尔变量控制状态：

<div [@CompressExpandAnimation]="isExpanded">
  <!-- 你的展开/收缩内容 -->
</div>

<button (click)="isExpanded = !isExpanded">
  {{ isExpanded ? '收起' : '展开' }}
</button>

这样切换isExpanded变量时，就能流畅地实现内容的展开和收缩效果了，完全不需要拆分两个动画函数~

内容的提问来源于stack exchange，提问作者User 5842