多个状态和转场:
trigger('complexAnimation', [
state('state1', style({ transform: 'translateX(0)' })),
state('state2', style({ transform: 'translateX(100px)' })),
state('state3', style({ transform: 'translateX(200px)' })),
transition('state1 => state2', animate('500ms ease-in')),
transition('state2 => state3', animate('500ms ease-in'))
])
上述代码中,complexAnimation 触发器定义了三个状态 state1、state2 和 state3,以及两个过渡,分别是从 state1 到 state2 和从 state2 到 state3。
并行和串行动画:
- 并行动画:
trigger('parallelAnimation', [
state('state1', style({ opacity: 0 })),
state('state2', style({ transform: 'translateX(100px)' })),
transition('state1 => state2', animate('500ms ease-in'))
]),
trigger('parallelAnimation2', [
state('state1', style({ backgroundColor: 'red' })),
state('state2', style({ backgroundColor: 'blue' })),
transition('state1 => state2', animate('500ms ease-in'))
])
上述代码中,parallelAnimation 和 parallelAnimation2 是两个并行的触发器,它们可以同时执行。
- 串行动画:
trigger('sequenceAnimation', [
state('state1', style({ opacity: 0 })),
state('state2', style({ transform: 'translateX(100px)' })),
transition('state1 => state2', [
animate('500ms ease-in'),
animate('200ms ease-out')
])
])
上述代码中,sequenceAnimation 触发器定义了一个包含两个动画的过渡,它们按顺序执行。
延时和关键帧动画:
- 延时动画:
trigger('delayedAnimation', [
state('state1', style({ transform: 'translateX(0)' })),
state('state2', style({ transform: 'translateX(100px)' })),
transition('state1 => state2', animate('500ms ease-in', keyframes([
style({ transform: 'translateX(0)', offset: 0 }),
style({ transform: 'translateX(50px)', offset: 0.5 }),
style({ transform: 'translateX(100px)', offset: 1 })
])))
])
上述代码中,delayedAnimation 触发器定义了一个延时动画,其中包含一个关键帧动画。
在模板中使用:
在组件的模板中,你可以使用 [@triggerName] 语法触发定义的状态,也可以使用 :enter 和 :leave 伪类选择器触发进场和离场动画。
<!-- 触发状态动画 -->
<div [@complexAnimation]="animationState"></div>
<!-- 触发进场和离场动画 -->
<div *ngIf="isVisible" [@fadeInOut]>I appear and disappear</div>
这些示例只是展示了Angular动画系统的一部分功能,你可以根据具体需求进行更多的组合和定制。了解Angular动画系统的基础概念,并通过实践逐步深入,将有助于你创建出复杂而流畅的动画效果。
转载请注明出处:http://www.pingtaimeng.com/article/detail/4981/Angular