如何使用Angular动画实现页面内容逐个显示效果

你的问题出在两个核心点：所有动画并行触发，且子元素未设置初始隐藏状态。以下是修复方案：

问题根源 #

• 当前代码里所有query内的animate会同时执行，导致元素一次性全部显示
• 仅给:self设置opacity:0只会隐藏父容器，子元素初始仍为可见，动画过渡效果无法体现

修复后的代码 #

animations: [
  trigger('homeAnimations', [
    transition(':enter', [
      // 统一设置所有目标子元素的初始隐藏状态
      query('#presentation h1, #presentation h2, #presentation p, #btn1, #btn2, #btn3', [
        style({ opacity: 0 })
      ], { optional: true }),
      // 使用sequence让动画按顺序逐个执行
      sequence([
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ])
]

关键优化说明 #

• sequence函数：强制内部动画按顺序执行，前一个元素的动画完成后才启动下一个，实现逐个显示的效果
• 初始样式统一设置：通过单次query选中所有目标子元素，统一设置opacity:0，确保所有元素从隐藏状态开始动画
• 可选进阶调整：如果需要更自然的衔接，可给后续动画添加延迟，比如animate('2s 0.3s', style({ opacity: 1 }))，让元素动画轻微重叠但仍保持顺序

内容的提问来源于stack exchange，提问作者KoZ x Tricky