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

Solution: Transition the toolbar with a fade - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

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,…

Contents