Angular Animations
Imagine walking into a room where lights fade in smoothly, doors slide open, and elements move gracefully. Angular animations let you add these kinds of motion and transitions to your application, making it more engaging and professional.
Angular's animation system is built on top of the Web Animations API and provides a powerful DSL (Domain Specific Language) for creating complex animations.
Setup
First, import
BrowserAnimationsModule in your app module:import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [BrowserAnimationsModule]
})
Basic Animation Example
Let's create a simple fade-in/fade-out animation.
Step 1: Import animation functions in your component
import { trigger, state, style, transition, animate } from '@angular/animations';
Step 2: Define the animation in @Component metadata
@Component({
selector: 'app-fade',
templateUrl: './fade.component.html',
animations: [
trigger('fade', [
state('void', style({ opacity: 0 })), // when element is not in DOM
transition(':enter, :leave', [
animate(500)
])
])
]
})
Step 3: Use the animation in template
<div *ngIf="show" @fade>
This element fades in and out
</div>
<button (click)="show = !show">Toggle</button>
Common Animation Techniques
1. Route Transitions
Animate between routes:
trigger('routeAnimations', [
transition('* <=> *', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])
])
2. List Animations
Animate items entering/leaving a list:
trigger('listAnimation', [
transition(':enter', [
style({ transform: 'translateX(-100%)', opacity: 0 }),
animate('300ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
]),
transition(':leave', [
animate('300ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
])
])
Two Minute Drill
- Import BrowserAnimationsModule to enable animations.
- Use @Component.animations to define triggers.
- state() defines styles at different states.
- transition() defines how to move between states.
- Special states: 'void' (element not in DOM), '*' (any state).
- Special transitions: ':enter' (void => *), ':leave' (* => void).
Need more clarification?
Drop us an email at career@quipoinfotech.com