在Angular Animations中能否为单个状态添加多个transition属性？

当然可以！在Angular Animations中，完全可以为单个状态配置多个transition属性，这在需要针对同一状态的不同转换场景设置差异化动画时非常实用。

举个简单的例子，假设我们有一个组件状态'visible'，我们希望：

• 从'hidden'切换到'visible'时使用淡入动画
• 从'disabled'切换到'visible'时使用滑入动画
• 从'visible'切换到任何其他状态时使用缩放淡出动画

对应的动画触发器代码可以这样写：

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

@Component({
  // ... 组件元数据
  animations: [
    trigger('visibilityTrigger', [
      state('visible', style({ opacity: 1, transform: 'translateX(0)' })),
      state('hidden', style({ opacity: 0, transform: 'scale(0.8)' })),
      state('disabled', style({ opacity: 0.5, transform: 'translateX(-100%)' })),
      
      // 多个针对visible状态的transition
      transition('hidden => visible', animate('300ms ease-in')),
      transition('disabled => visible', animate('400ms ease-out')),
      transition('visible => *', animate('250ms ease-in-out'))
    ])
  ]
})

这里的核心逻辑是：transition是基于状态转换路径定义的，而非绑定单个状态本身。只要转换路径涉及到目标状态或起始状态，你就可以为同一状态定义任意多个不同的transition，每个对应不同的转换场景。

你还可以结合:enter、:leave这类特殊伪状态，为同一状态的进入/退出添加不同过渡动画，或者使用条件表达式进一步区分转换逻辑，让动画控制更灵活。

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