0Pricing
Angular Academy · Lesson

Transitions and Timing

Animate between states with transitions.

Animating Between States

States describe where the element rests; transitions describe how it moves between them. The transition function pairs a state change with an animation.

The transition Function

transition takes a state-change expression and one or more animation steps.

transition('closed => open', animate('300ms'))

All lessons in this course

  1. Animation Basics: trigger and state
  2. Transitions and Timing
  3. Enter and Leave Animations
  4. Keyframes and Staggering
← Back to Angular Academy