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)"
      style="width:100px; height:100px;">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>
`,