Lessons:2Length:9 minutes
- 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 App2 lessons, 08:47
2 lessons, 08:47
Free Lesson 1.1Introduction00:59
Free Lesson
1.1
Introduction
00:59
1.2How to Animate Your Angular 2 App07:48
1.2
How to Animate Your Angular 2 App
07:48