如何使用Angular Animations实现Flex元素位置变化的平滑动画

1. 基础配置：导入动画模块 #

首先确保在你的Angular模块中导入BrowserAnimationsModule，启用动画支持：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule],
  // 其他模块配置
})
export class AppModule { }

2. 定义组件动画触发器 #

在组件中创建针对列表项进入、离开、位置变更的动画逻辑，通过监听列表长度变化和元素状态变更触发平滑过渡：

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css'],
  animations: [
    trigger('flexListAnimations', [
      // 列表长度增加时的过渡逻辑
      transition(':increment', [
        // 新元素进入动画
        query(':enter', [
          style({ opacity: 0, transform: 'translateY(20px)' }),
          stagger(100, [
            animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ], { optional: true }),
        // 后续元素随移除项平滑上移
        query(':leave + *', [
          animate('300ms ease-out', style({ transform: 'translateY(0)' }))
        ], { optional: true })
      ]),
      // 列表长度减少时的过渡逻辑
      transition(':decrement', [
        // 元素移除动画
        query(':leave', [
          animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' }))
        ], { optional: true }),
        // 后续元素平滑上移
        query(':leave + *', [
          animate('300ms ease-out', style({ transform: 'translateY(0)' }))
        ], { optional: true })
      ]),
      // 元素位置变更（如排序、洗牌）的过渡逻辑
      transition('* => *', [
        query(':enter', [
          style({ opacity: 0, transform: 'translateY(20px)' }),
          animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
        ], { optional: true }),
        query(':leave', [
          animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' }))
        ], { optional: true }),
        // 所有元素平滑过渡到新位置
        query('@*', animateChild(), { optional: true })
      ])
    ])
  ]
})
export class YourComponent {
  items = [1, 2, 3, 4, 5];

  addItem() {
    this.items.push(this.items.length + 1);
  }

  removeItem(index: number) {
    this.items.splice(index, 1);
  }

  shuffleItems() {
    // 生成新数组触发位置变更动画
    this.items = [...this.items].sort(() => Math.random() - 0.5);
  }
}

3. 模板与Flex布局绑定 #

将动画触发器绑定到Flex容器，同时确保列表项的循环渲染逻辑：

<!-- Flex容器绑定动画触发器，监听列表长度变化 -->
<div class="flex-container" [@flexListAnimations]="items.length">
  <div class="flex-item" *ngFor="let item of items; let i = index">
    Item {{ item }}
    <button (click)="removeItem(i)">移除</button>
  </div>
</div>

<button (click)="addItem()">添加元素</button>
<button (click)="shuffleItems()">随机排序</button>

4. Flex布局基础样式 #

添加CSS确保Flex布局的正常显示，同时避免动画过程中布局抖动：

.flex-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  /* 固定容器高度避免布局跳动 */
  min-height: calc(5 * (40px + 10px));
}

.flex-item {
  padding: 10px;
  background: #f0f0f0;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 固定高度保证动画一致性 */
  height: 40px;
}

关键逻辑说明 #

• :increment/:decrement：监听列表长度的增减，分别处理元素进入/离开的动画序列
• query(':leave + *')：捕获移除元素后的后续元素，触发它们的位置平滑过渡
• stagger：让新进入的元素按顺序延迟动画，提升视觉自然度
• optional: true：避免无元素进入/离开时触发动画错误
• 位置变更时生成新数组：Angular通过数组引用变化触发重渲染，从而触发位置过渡动画

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