The animation you currently have performs a basic linear animation, which is not that exciting. Anyone who has studied traditional animation concepts knows how important timing is to create an effective animation. Angular provides an animation delay and a set of powerful easing functions you can use to make your movements much more interesting.
- The animation we currently have,…performs a basic linear transition.…Which is not that exciting.…Anyone who has studied traditional animation concepts,…knows how important timing is…to creating an effective animation.…Angular provides an animation delay…and a set of powerful easing functions we can use…to make our movements much more interesting.…The first thing we'll do, is go back to our basic component…and from here we can actually add a couple more buttons.…
So I'm going to paste these in…and then just kind of fix the tabbing on this code here.…So, just like the two other ones,…we're clicking and setting the state.…However, now we are passing in two additional states.…One is a string of delaying…and one is a string of easing.…To animate with delay or to animate with ease.…It uses the exact same construct we've already set up.…
Let's save this file…and then we'll focus our attention once again…to the animbox.components.…We're passing in two additional states…so let's actually define those states in here…as new states.…
- Installing the Angular CLI
- Creating a new project
- Verifying the animations package
- Configuring project routes
- Animating components
- Triggering animation between states
- Stepped and parallel animation
- Writing reusable animations
- Animating individual items with query and stagger
- Animating an existing Angular project
Skill Level Intermediate
1. Getting Ready to Animate
2. Enabling Angular Animations
3. Angular Animation Basics
4. Advanced Angular Animation
5. Animating an Existing Interface
6. Package for Distribution
Building the project1m 56s
- 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.