Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.2 How to Animate Your Angular 2 App

In this lesson you will learn how to add animations to your components. Then I’ll show you some shortcuts you can use in your animation configurations. After that you will learn to apply styles that are only in effect during the animation.

Code Snippet

Here’s a sample animation for an Angular 2 button that transitions between two states.

animations: [
  trigger('buttonState', [
    state('inactive', style({
      backgroundColor: '#010A03',
      color: '#F5F200',
      textDecoration: 'line-through',
      transform: 'translateX(600px) scale(1)',
    })),
    state('active',   style({
      backgroundColor: '#2B2BB0',
      color: '#F5EEE0',
      transform: 'scale(1.5)'
    })),
    transition('* => void', [
      style({ backgroundColor: '#FF5100' }),

      animate('2000ms 1000ms ease-in')
    ])
  ])
]

1.How to Animate Your Angular 2 App
2 lessons, 08:47

Free Lesson
1.1
Introduction
00:59

1.2
How to Animate Your Angular 2 App
07:48