Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Angular: Animations

via LinkedIn Learning

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Explore the animation capabilities of Angular. Learn how to animate elements in your web applications, and build more engaging user experiences.

Syllabus

Introduction
  • Welcome
  • What you should know before taking this course
  • Using the exercise files
  • What's new in this update
1. Getting Ready to Animate
  • How Angular animations work
  • Angular CLI Installation
  • Creating a new project
  • Project structure
  • Preview the project
  • Challenge: Update your Angular version
  • Solution: Update your Angular version
2. Enabling Angular Animations
  • Verifying the animations package
  • Project module configuration
  • Application layout
  • Creating route view components
  • Configuring project routes
  • Challenge: Create a 404 route view
  • Solution: Create a 404 route view
3. Angular Animation Basics
  • Preparing component interaction
  • Establishing stateful data
  • Triggering animation between states
  • Delay and easing functions
  • Stepped animation with keyframes
  • Parallel animation with groups
  • Animation callback functions
  • Challenge: Clear the message text
  • Solution: Clear the message text
4. Advanced Angular Animation
  • Self-contained component animation
  • Writing reusable animations
  • Animation input parameters
  • Configuring router animation
  • Selecting items with a query
  • Using Stagger within an animation
  • Challenge: Per-page router animations
  • Solution: Per-page router animations
5. Animating an Existing Interface
  • Video playback overview
  • Adding animation packages
  • Old animation cleanup
  • Creating Angular components
  • Component instantiation and data value translation
  • Animating the video title
  • Animating the playback overlay
  • Providing playlist motion
  • Challenge: Transition the toolbar with a fade
  • Solution: Transition the toolbar with a fade
6. Package for Distribution
  • Building the project
Conclusion
  • Goodbye

Taught by

Joseph Labrecque

Reviews

4.6 rating at LinkedIn Learning based on 62 ratings

Start your review of Angular: Animations

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.