Angular中含gap内容的平滑展开收起动画实现方案

问题背景 #

我一直使用以下代码实现元素的展开/收起动画，通过*ngIf控制元素显隐时效果良好：

const expanded = style({ height: '*', opacity: 1 });
const collapsed = style({ height: 0, opacity: 0 });
const animation = animate(`300ms cubic-bezier(0.4, 0.0, 0.2, 1)`);

export const expandCollapse = trigger('expandCollapse', [
  transition(':enter', [collapsed, animation, expanded]),
  transition(':leave', [animation, collapsed]),
]);

但当内容使用gap属性时，动画首尾出现卡顿。尝试将gap属性加入动画参数仍未解决：

const expanded = style({ height: '*', gap: '*', opacity: 1 });
const collapsed = style({ height: 0, gap: 0, opacity: 0 });

解决方案 #

方案1：用 max-height 替代 height + 内部容器 gap 过渡 #

问题根源是height: 0会直接截断容器，导致gap动画无过渡空间。改用max-height让容器逐步收缩/展开，同时给带gap的内部容器单独添加过渡：

1. 修改动画触发器：

const expanded = style({ maxHeight: '1000px', opacity: 1 });
// 设置足够大的maxHeight覆盖内容最大高度
const collapsed = style({ maxHeight: '0px', opacity: 0 });
const animation = animate(`300ms cubic-bezier(0.4, 0.0, 0.2, 1)`);

export const expandCollapse = trigger('expandCollapse', [
  state('collapsed', style({ maxHeight: '0px', opacity: 0 })),
  state('expanded', style({ maxHeight: '1000px', opacity: 1 })),
  transition('collapsed <=> expanded', animation),
]);

2. 调整组件样式：
   给内部内容容器添加gap的过渡动画：

.inner-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: gap 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* 结合动画状态控制gap */
:host ::ng-deep [expandCollapse].collapsed .inner-content {
  gap: 0;
}

方案2：用 padding 替代 gap #

如果不想嵌套容器，可将gap替换为子元素的padding-bottom，让间距随内容自然过渡：

.content-item {
  padding-bottom: 1rem;
}

.content-item:last-child {
  padding-bottom: 0;
}

此时原有的height动画即可正常工作，无需额外修改动画代码。

核心原理 #

height: 0会瞬间隐藏容器内所有空间，包括gap的间距，导致gap动画无法正常过渡。max-height能让容器在动画过程中保持可测量的空间，配合内部容器的gap过渡，就能实现完全平滑的展开/收起效果。

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