Now that you understand how Angular animations are used within a new project, it is beneficial to see how an existing project can be modified to make use of this functionality. For this purpose, use a slightly updated version of the Angular video playback application from the course “Building Custom HTML5 Video Playback with Angular 2”.
- [Instructor] Now that we understand how Angular animations are used within a new project, it would be beneficial to see how an existing project can be modified to make use of this functionality. For this purpose, we'll use a slightly update version of the Angular Video Playback application from my course Building Custom HTML5 Video Playback with Angular 2. The only difference in this project, is that has been updated to make use of Angular 4. So as you can see, we get a number of things on the screen here.
We have a title, we have this big play button. We have a toolbar with a scrubber, volume, playback, time readout, and so forth. So if we go ahead and play this, we can see the present video. When we pause it, then the video pauses. We've got full screen capability and we also have this little video details panel where it provides a description of the video and you're actually able to go through and click to play other videos.
And that's the basics of this current Angular application which does not use Angular animations at this time. We're going to go ahead and fix that though.
- 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.