From the course: Angular: Animations
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Solution: Transition the toolbar with a fade - Angular Tutorial
From the course: Angular: Animations
Solution: Transition the toolbar with a fade
(upbeat electronic music) - [Instructor] So the steps I took to solve this problem might be more complicated than a lot of the other challenges that we saw in this course. It involves a lot of files and a lot of changes to code. Let's go ahead and have a look though. First we'll go to app dot component and have a look at our full player. This is the div that encompasses all of the elements of our video playback. Notice I've added a number of things here for mouse up, mouse move, mouse leave and so forth directly on the full player element. These invoke video service dot drag stop, drag move, drag stop again, and we also have mouse over and mouse out in order to invoke show tools on the video service function, and either set that property to true on a mouse over or false on a mouse out. Additionally, if we look down below to the video toolbar, on this component we've set a new attribute called is hidden,…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
Video playback overview1m 18s
-
(Locked)
Adding animation packages3m 31s
-
(Locked)
Old animation cleanup1m 51s
-
(Locked)
Creating Angular components2m 57s
-
(Locked)
Component instantiation and data value translation4m 3s
-
(Locked)
Animating the video title2m 58s
-
(Locked)
Animating the playback overlay3m 6s
-
(Locked)
Providing playlist motion3m 31s
-
(Locked)
Challenge: Transition the toolbar with a fade28s
-
(Locked)
Solution: Transition the toolbar with a fade3m 21s
-
-
-