Angular中如何为布局偏移（Layout Shift）添加动画过渡效果

你描述的元素消失后下方区域跳动的问题，本质是容器高度突变导致的布局偏移，可以通过Angular Animations配置子元素退场+父容器高度过渡的组合方案实现平滑效果，具体实现步骤如下：

1. 导入动画依赖 #

在对应组件的.ts文件头部导入所需的Angular动画API：

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

2. 配置动画触发器 #

在组件的@Component装饰器的animations数组中添加两个动画触发器，分别控制单个任务项的退场效果和父容器的高度过渡：

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css'],
  animations: [
    // 父容器动画：处理高度变化
    trigger('containerTransition', [
      transition(':enter, :leave', [
        // 先执行子元素的动画
        query('@*', animateChild(), { optional: true }),
        // 平滑过渡容器高度
        animate('280ms ease-in-out', style({ height: '*' }))
      ])
    ]),
    // 子任务项动画：处理退场时的透明度和盒模型属性过渡
    trigger('itemLeave', [
      transition(':leave', [
        animate('280ms ease-in-out', style({
          opacity: 0,
          height: 0,
          margin: 0,
          padding: 0,
          border: 0
        }))
      ])
    ])
  ]
})

3. 模板绑定动画 #

在组件模板中给任务列表的父容器绑定containerTransition触发器，给每个遍历渲染的任务项绑定itemLeave触发器：

<!-- 任务列表父容器 -->
<div [@containerTransition]>
  <!-- 单个任务项 -->
  <div 
    *ngFor="let task of tasks; trackBy: trackById"
    [@itemLeave]
  >
    {{ task.name }}
    <button (click)="deleteTask(task.id)">删除</button>
  </div>
</div>

注意要点 #

• 父容器不要设置固定高度，需由子元素内容自动撑开，动画会自动计算高度差值实现过渡
• 如果任务项有自定义的边框、外边距等属性，需要全部加到itemLeave的动画属性列表中，避免残留间距导致的微小跳动
• 可以根据实际需求调整两个动画的时长，建议保持一致避免出现动画不同步的问题

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