mcpField
A
angular-animations

angular-animations

github.com/oguzhan18设计与 UI7194 次安装30 周前更新
代码仓库

关于 angular-animations

面向 Angular 开发者的界面动画参考技能，涵盖状态与进出场过渡、新动画 API，以及性能和无障碍实践。

主要功能

  1. 01基于状态的动画触发器
  2. 02进场与离场过渡
  3. 03CSS 与 View Transitions API
  4. 04使用 query 和 stagger 实现列表动画
  5. 05可复用的动画触发器
  6. 06减少动态效果的建议

适用场景

  1. 01为元素显示或移除添加过渡
  2. 02为 Angular 组件中的状态变化添加动画
  3. 03让列表项目依次出现
  4. 04为无障碍需求减少动态效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-animations

安装后在 Claude Code 中输入/angular-animations确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

@angular/animations

版本： Angular 21（2025） 标签： 动画、UI、过渡、动态效果

参考： 动画指南 • API • npm

API 变更

本节记录近期特定版本的 API 变更。

  • 新增：现代动画 API — 使用 animateEnter 和 animateLeave 替代已弃用的 :enter/:leave

  • 新增：基于 CSS 的动画 — Angular 团队建议使用 CSS，以获得更好的性能

  • 新增：视图过渡 API — 支持浏览器的 View Transitions API

  • 已弃用：:enter 和 :leave — 改用 animateEnter 和 animateLeave

最佳实践

  • 启用动画模块
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations()
  ]
};
  • 使用触发器实现基于状态的动画
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  animations: [
    trigger('fadeInOut', [
      state('hidden', style({ opacity: 0 })),
      state('visible', style({ opacity: 1 })),
      transition('hidden <=> visible', animate(500))
    ])
  ]
})
export class FadeComponent {
  isVisible = signal(false);
}
  • 使用进入/离开动画
@Component({
  animations: [
    trigger('slideIn', [
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
      ]),
      transition(':leave', [
        animate('300ms ease-out', style({ transform: 'translateX(-100%)' }))
      ])
    ])
  ]
})
export class SlideComponent {}
  • 使用通配状态匹配任意过渡
trigger('expand', [
  transition('* => expanded', [
    style({ height: '*' }),
    animate('300ms ease-out', style({ height: '200px' }))
  ]),
  transition('expanded => *', [
    animate('300ms ease-in', style({ height: '*' }))
  ])
])
  • 使用 query 和 stagger 实现列表动画
trigger('listAnimation', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('300ms', style({ opacity: 1 }))
      ])
    ], { optional: true })
  ])
])
  • 使用动画回调
@Component({
  template: `
    <div [@fade]="state" 
         (@fade.start)="onAnimationStart()"
         (@fade.done)="onAnimationDone()">
    </div>
  `
})
export class AnimComponent {
  onAnimationStart() { console.log('Start'); }
  onAnimationDone() { console.log('Done'); }
}
  • 使用可复用的触发器
// animations.ts
export const fadeAnimation = trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('300ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('300ms', style({ opacity: 0 }))
  ])
]);
  • 使用函数式动画（Angular 17+）
@Component({
  animations: [
    trigger('expanded', [
      transition(':expanded', [
        animate('300ms cubic-bezier(0.4, 0, 0.2, 1)')
      ])
    ])
  ]
})
export class ExpandComponent {}
  • 优化性能
// Prefer transform and opacity
transition('* => *', [
  animate('200ms', style({ 
    transform: 'translateX(10px)',
    opacity: 0.5 
  }))
])

// Avoid expensive properties
// ❌ Don't animate: width, height, margin, top
// ✅ Do animate: transform, opacity
  • 提供减少动态效果的选项，提升无障碍体验
@Component({
  animations: [
    trigger('slide', [
      transition('* => *', [
        style({ '@.disabled': '' }), // Disable for reduced motion
        animate('300ms')
      ])
    ])
  ]
})

评论

支持 Markdown