From the course: Angular: Animations
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Providing playlist motion - Angular Tutorial
From the course: Angular: Animations
Providing playlist motion
- [Narrator] The final component of our video playback to animate is the options component. For this component, we'll have the options overlay slide in and out from the side, while simultaneously changing opacity. Let's go ahead and open up the options component TS file, and from here we're going to actually paste in some snippets, where we include input from angular slash core, and of course we're importing all the normal stuff from angular slash animations. With that done we need to add our trigger to our video options, so to do that, we need to actually get rid of this little hidden bit that's coming in here. We don't need that any more, that's for the older system. And we're going to pass in this trigger, hidden change, based on "is hidden," which will be coming in from outside the component, just as with our previous two components. Let's go ahead now and configure our animations block. We'll paste that in from our snippets file, and here we have our hidden change trigger, which…
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
-
-
-