angular 2 animate 笔记
好久没有在这里写点笔记了。时隔已久,angular1 去 angular2 咯
笔记来源:https://angular.cn/docs/ts/latest/guide/animations.html
动画基于这标准:https://w3c.github.io/web-animations/
以下是基本设置
template: ` <button (click)="heroState = 'active'">enter</button> <button (click)="heroState = null">leave</button> <button (click)="changeAnimate()">animate</button> <div *ngIf="heroState" [@heroState]="heroState" (@heroState.start)="animationStarted($event)" (@heroState.done)="animationDone($event)" >example</div> {{heroState}} `, animations: [ trigger('heroState', [ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]) ]
在animate 中,需要理解几样东西就能明白真个笔记。
1. @trigger (绑定elem)
2. 状态 (通过状态转换改变style)
3. 过渡 (动画)
状态与过渡 :state 是状态,表明样式。过渡是动画,声明某个状态去到某个状态
state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out'))
合拼过渡
transition('inactive <=> active', animate('100ms ease-out'))
转换不保留样式:在过渡添加style,意思是当状态转换时,会使用指定样式,接着执行动画,结束后移除样式
transition('inactive => active', [ style({ backgroundColor: '#cfd8dc', transform: 'scale(1.3)' }), animate('80ms ease-in', style({ backgroundColor: '#eee', transform: 'scale(1)' })) ]),
通配符*,进场,出场 : 都是状态转换的方式
transition('inactive => *', [ style({transform: 'translateX(-100%)'}), animate(100) ]) transition('* => inactive', [ animate(100, style({transform: 'translateX(100%)'})) ]) transition('* => void', [ //:leave 省略写法 animate(100, style({transform: 'translateX(100%)'})) ]) transition('void => *', [ //:enter 省略写法 animate(100, style({transform: 'translateX(100%)'})) ])
动画变量 : duration, delay,缓动(easing)函数
animate('2000ms 10 ease-in', style({ backgroundColor: '#f00', transform: 'translateX(100%)' })),
高级写法:keyframe (css3 原理)
animate(300, keyframes([ style({opacity: 0, transform: 'translateX(-100%)', offset: 0}), style({opacity: 1, transform: 'translateX(15px)', offset: 0.3}), style({opacity: 1, transform: 'translateX(0)', offset: 1.0}) ]))
组合animate : 处理混合动画
group([ animate('0.3s 0.1s ease', style({ transform: 'translateX(0)', width: 120 })), animate('0.3s ease', style({ opacity: 1 })) ])
回调 : $event 可以得到 fromState
,toState
和totalTime
template: ` <ul> <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)" (@flyInOut.done)="animationDone($event)" [@flyInOut]="'in'"> {{hero.name}} </li> </ul> `,