Learn how the transition function works in relation to states and the animate property.
- [Instructor] The animation-specific function Transition…is what allows us to control the actual animation…that occurs between two different states.…The first argument of the transition function…accepts the two different states…and the direction between them.…The next argument accepts the animate function,…which allows you to define…the timing and easing of the animation.…Continuing on from the previous example,…let's add a transition to our animation.…So, going down to animations, underneath our last state,…let's add a comma, transition,…and this is going to go from our active state…to our inactive state.…
All right.…In the next argument, we put in animate,…and we'll animate it for 500 milliseconds,…or half a second, and we'll ease it in.…So let's save and go back to our browser.…Now we can see the subtle change from…our two different background colors.…But notice there's only one animation taking place.…Well, that's because we only defined…one transition going in one direction.…So let's create a separate transition function…
- How components work
- Defining HTML templates
- Defining CSS
- Class binding and style binding
- Property binding and event binding
- Creating routes for navigation
Skill Level Intermediate
1. Getting Up and Running with Angular
2. Templating Basics
3. Data Binding
5. Tying It All Together
- 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.