README.md

Animations

• Built on top of Web Animations specification
• Part of @angular/core module

---

Browser Support

Polyfill for older browsers

---

Adding Polyfill to Angular CLI

npm install --save web-animations-js

angular-cli.json

"scripts": [
  "../node_modules/web-animations-js/web-animations.min.js"
],

---

Animations - Supported Properties

• List available in the standard
• Basically every color (background, border, etc.) and dimension (width, height, size, etc.)
  • background-color
  • border-width
  • max-height

---

Animations API

• Part of @angular/core:
  • trigger
  • state
  • style
  • transition
  • animate
• Declared within the @Component annotation:

@Component({
  animations: [
    trigger(...)
  ]
})

---

Animation States

• Trigger is bound to the certain element
• States are the possible values for triggered value
• States have styles
• Transitions between states are animated
• Animations have duration and timing functions etc.

---

Triggers

Trigger is bound to the certain element

my.component.ts

@Component({
  animations: [
    trigger('myTrigger', [
      ...
    ])
  ]
})
export class MyComponent {
  state = 'state1';
}

my.component.html

<div [@myTrigger]="state">
  My element
</div>

---

States

States are the possible values for triggered value

my.component.ts

trigger('myTrigger', [
*  state('state1', ...),
*  state('state2', ...)
])
export class MyComponent {
  state = 'state1';

  changeState() {
    state = 'state2';
  }
}

---

Styles

States have styles

my.component.ts

trigger('myTrigger', [
  state('state1', style({
    'backgroundColor': '#fff'
  })),
  state('state2', style({
    'backgroundColor': '#000'
  }))
])
export class MyComponent {
  state = 'state1';

  changeState() {
    state = 'state2';
  }
}

---

Transitions

Transitions between states are animated

my.component.ts

trigger('myTrigger', [
  state(...),
* transition('state1 => state2', ...),
* transition('state2 => state1', ...)
])
export class MyComponent {
  state = 'state1';

  changeState() {
    state = 'state2';
  }
}

---

Animations

Animations have duration and timing functions etc.

my.component.ts

trigger('myTrigger', [
  state(...),
  transition('state1 => state2', `animate('100ms ease-in')`),
  transition('state2 => state1', `animate('100ms ease-out')`)
])
export class MyComponent {
  state = 'state1';

  changeState() {
    state = 'state2';
  }
}

---

Special States

• Two special states:
  • void: element is not attached to a view
  • *: matches any animation state
• Can be used in transitions:
  • transition('void => *', ...): element enters the view
  • transition('* => void', ...): element leaves the view
• Entering and leaving also have aliases:

transition(`':enter'`, ...); // void => *
transition(`':leave'`, ...); // * => void

---

Animation Events

• Events to be registered
  • (@myTrigger.start)="animationStarted($event)"
  • (@myTrigger.done)="animationDone($event)"

<div
  [@myTrigger]="state"
* (@myTrigger.start)="animationStarted($event)"
* (@myTrigger.done)="animationDone($event)">
  My element
</div>