Angular中如何使用单独.ts文件中定义导出的动画trigger？

单独文件动画Trigger使用步骤 #

你不需要额外的useTrigger类API，按以下3步操作即可：

步骤1：补全独立动画文件的定义

首先你示例中用到的transitionAnimation需要提前定义，否则会报错，完整的独立动画文件（示例命名为open-close.animation.ts）如下：

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

// 定义可复用的过渡动画片段
export const transitionAnimation = animation([
  style({
    height: '{{ height }}',
    opacity: '{{ opacity }}',
    backgroundColor: '{{ backgroundColor }}'
  }),
  animate('{{ time }}')
]);

// 导出封装完成的动画trigger
export const triggerAnimation = trigger('openClose', [
  transition('open => closed', [
    useAnimation(transitionAnimation, {
      params: {
        height: 0,
        opacity: 1,
        backgroundColor: 'red',
        time: '1s'
      }
    })
  ]),
  // 可按需添加反向过渡逻辑
  transition('closed => open', [
    useAnimation(transitionAnimation, {
      params: {
        height: '*',
        opacity: 1,
        backgroundColor: 'green',
        time: '0.5s'
      }
    })
  ])
]);

步骤2：在目标组件中导入并注册trigger

直接把导出的trigger放入@Component装饰器的animations数组中完成注册即可：

import { Component } from '@angular/core';
// 导入独立文件中的动画trigger
import { triggerAnimation } from './路径/open-close.animation';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  // 注册导入的trigger
  animations: [triggerAnimation]
})
export class YourComponent {
  // 定义和trigger状态对应的控制变量
  isOpen = true;

  toggleStatus() {
    this.isOpen = !this.isOpen;
  }
}

步骤3：模板中绑定动画trigger

在需要触发动画的元素上绑定trigger和状态变量：

<div [@openClose]="isOpen ? 'open' : 'closed'" style="padding: 1rem;">
  动画生效的内容区域
</div>
<button (click)="toggleStatus()">切换动画状态</button>

补充说明 #

• 如果你需要覆盖trigger中定义的默认参数，可以在绑定时传入自定义参数：<div [@openClose]="{value: isOpen ? 'open' : 'closed', params: {time: '2s'}}">
• useAnimation仅用于封装可复用的动画片段，封装完成的trigger无需额外方法调用，直接注册到组件即可使用。

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