To set up: npm install –save @angular/animation

• Steps to show animation:
  • animation works with component: such as
    • @Component({
    • selector: ‘app-name’,
    • templateUrl: ‘…’,
    • styleUrls: [],
    • animation: [trigger(‘trigger-name’, […]), trigger(…)]})
  • using trigger() method to trigger the animation: trigger(name, […states…])
  • using state() method to represent different state status: state(name, style({…}))
  • using transition() to make animation: transition(‘state 1 <=> state2’, [animate(…ms, style({})), animate(…ms, style({}))])
  • using animate() and keyframes() method to adjust the key frame
  • also can use group() method to group animate () to make them change at the same time
  • in template,
    • <div [@trigger-name] = “class property” >…</div>
  • also can listen the animation:
    • <div
    • [@trigger-name] = class property
    • (@trigger-name-start) = “function()”
    • (@trigger-name-end) = “function()”>
    • …</div>