From the course: Angular: Animations
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Old animation cleanup - Angular Tutorial
From the course: Angular: Animations
Old animation cleanup
- [Instructor] Our existing project already has a few rudimentary CSS fade animations which toggle between two states. We will replace these with proper angular animations, but first need to perform some cleanup. So let's locate our styles.css, and in here we have fader and fade-out styles. We'll locate those and remove them. There they are. And there they go. Let's save this file. Next we'll go to our app component. This is our main application component. And here we want to pay attention to our template. So the best way to find anything is to see if we have fade-in, fade-out sort of things here. We want to actually remove any of these fader classes. Those classes don't exist anymore since we removed them from the CSS. And we want to remove these conditional classes for fade-out that's using ngClass for angular based on properties of our application. At this point we can go ahead and save the file. It will compile, and we can of course verify that everything is okay by going to the…
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
-
-
-