In this video, discover how to create transition animations between routes that are specific to the routes and directionality being used upon user interaction through adjustments within the routing configuration.
(upbeat music) … - [Instructor] So I took a couple … of steps to solve this challenge. … The first one is in my animations TypeScript file. … If you scroll down, … we have our existing slide animation here, … but I've also created a new dissolve animation, … which basically does a fade using ease-in-out, … and we just take the opacity either from one … to zero, back and forth. … Instead of a nice sliding animation here, … we get a nice fade. … So to implement this, within app.component, … note that we import our dissolve animation from animations … and then, if we look down here, … what we've done inside our animations trigger … is we've just been a little more specific … around the transition for any route … that transitions to home. … So any other page is going to get the slide animation … that we currently have, … and the new dissolve animation will be implemented … whenever we go from any other page to the homepage. … Let's see this in action in the web browser. … All right, so here we are on our basics view here. …
- Installing the Angular CLI
- Creating a new project
- Verifying the animations package
- Configuring project routes
- Animating components
- Triggering animation between states
- Stepped and parallel animation
- Writing reusable animations
- Animating individual items with query and stagger
- Animating an existing Angular project
Skill Level Intermediate
1. Getting Ready to Animate
2. Enabling Angular Animations
3. Angular Animation Basics
4. Advanced Angular Animation
5. Animating an Existing Interface
6. Package for Distribution
Building the project1m 56s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.