Overview
-
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
- 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
- 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
- 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
- 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
- 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
- Building the project
- Goodbye
