Angular中*ngIf内容平滑展开/折叠动画的实现问题

针对你遇到的*ngIf添加/移除DOM时内容提前显示导致重叠，以及调整opacity后height动画失效的问题，以下是修正后的实现方案：

核心问题分析 #

1. 原代码未正确处理void <=> *过渡（*ngIf本质是元素从DOM中添加/移除，对应void状态）
2. 未设置overflow: hidden，导致内容在height动画期间溢出
3. 关键帧仅处理opacity，未同步维护height的动画状态

修正后的动画代码 #

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

export const growCollapse = trigger('growCollapse', [
  // 元素添加到DOM时的展开动画
  transition('void => *', [
    // 初始状态：高度为0，完全透明，隐藏溢出内容
    style({ height: '0px', opacity: 0, overflow: 'hidden' }),
    // 1秒动画：高度自动适配内容，动画后期渐显
    animate('1000ms ease-in-out', style({ height: '*', opacity: 1 }))
  ]),
  // 元素从DOM移除时的折叠动画
  transition('* => void', [
    // 初始状态：保持当前高度，完全可见，隐藏溢出内容
    style({ height: '*', opacity: 1, overflow: 'hidden' }),
    // 1秒动画：高度收窄到0，同时渐隐
    animate('1000ms ease-in-out', style({ height: '0px', opacity: 0 }))
  ])
]);

模板使用示例 #

<!-- 通过*ngIf控制显示/隐藏，绑定动画触发器 -->
<div [@growCollapse] *ngIf="isContentVisible">
  <!-- 这里放置你的容器内容 -->
  <p>示例内容</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</div>

进阶优化：子元素渐入效果 #

如果需要容器展开后子元素逐个渐入，可添加query和stagger：

import { trigger, transition, style, animate, query, stagger } from '@angular/animations';

export const growCollapse = trigger('growCollapse', [
  transition('void => *', [
    style({ height: '0px', opacity: 0, overflow: 'hidden' }),
    animate('1000ms ease-in-out', style({ height: '*', opacity: 1 })),
    // 子元素逐个渐入，间隔100ms
    query('*', [
      style({ opacity: 0 }),
      stagger(100, animate('300ms ease-in', style({ opacity: 1 })))
    ])
  ]),
  transition('* => void', [
    style({ height: '*', opacity: 1, overflow: 'hidden' }),
    animate('1000ms ease-in-out', style({ height: '0px', opacity: 0 }))
  ])
]);

关键注意事项 #

• 确保容器没有设置固定高度，让动画自动计算最终高度
• overflow: hidden是核心，必须添加以防止内容提前溢出
• 动画时长可根据需求调整，ease-in-out曲线保证动画更自然

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