Angular篇：Angular动画
最新回答
銱儿鎯筜
2023-01-21 06:38:03
Angular动画通过触发器（Trigger）、状态（State）和过渡（Transition）实现动态效果，支持复杂场景如列表动画、模态框淡入淡出等。以下是核心要点和实战示例：
1. 基础动画结构- 触发器（Trigger）：绑定到DOM元素，定义动画逻辑。trigger('flyInOut', [ state('in', style({ transform: 'translateX(0)' })), state('out', style({ transform: 'translateX(-100%)' })), transition('in => out', animate('0.5s ease-out'))])
- 模板绑定：通过[@triggerName]="expression"控制状态切换。<div [@flyInOut]="isShown ? 'in' : 'out'"></div>
- 状态（State）：定义元素在特定阶段的样式（如in/out）。
- 过渡（Transition）：指定状态间的动画效果，支持缓动函数（如ease-in）。transition('out => in', animate('500ms ease-in'))
通过输入属性动态控制动画参数（如持续时间）：
@Input() duration = 1000;animations: [ trigger('flyInOut', [ transition('* => *', animate(`{{duration}}ms`)) ])]动画事件监听捕获动画生命周期事件（如开始/结束）：
@HostListener('@flyInOut.start', ['$event'])onStart(event) { console.log('Started:', event); }组动画与查询同时运行多个动画（如平移+淡入）：
group([ query('@flyInOut', animateChild()), query('@fade', animateChild())])4. 实战示例列表项动画实现新增/删除项的动态效果：
trigger('listItem', [ state('void', style({ opacity: 0, transform: 'scale(0.5)' })), transition(':enter', animate('300ms')), // 入场动画 transition(':leave', animate('300ms')) // 离场动画])<li *ngFor="let item of items" [@listItem]>{{ item.text }}</li>模态框淡入淡出trigger('modal', [ state('in', style({ opacity: 1 })), state('out', style({ opacity: 0 })), transition('* => *', animate('200ms'))])5. 关键注意事项- 性能优化：对大量元素使用trackBy避免重复渲染。
- 浏览器兼容性：Angular动画依赖Web Animations API，需polyfill支持旧浏览器。
- 状态命名：避免与CSS类名冲突，推荐使用前缀（如anim-）。
通过合理组合触发器、状态和过渡，Angular动画能高效实现复杂的交互效果，显著提升用户体验。
热门标签
