1.2 How to Animate Your Angular 2 App

[MUSIC] Hello everyone, I am Reggie Dawson. Welcome to the Angular 2 Animations Coffee Break course for Tuts+. In this video, you'll learn how to configure animation to work with your components in Angular 2. These animations are based on the web animations API. To better understand how animation works in Angular 2, we will take a look at the sample project that I put together. The first thing you have in this component are the imports. If you have used Angular 2, you have seen the component import before, but the rest of these imports may be new to you. All of these additional imports provide functionality for our animations. We've also added animations to our component annotations. Inside that, the first thing we have is our trigger. This is an animation specific function that uses a list of states and transitions, to control the animations that are displayed. We will in turn bind this triggered to an expression in our template. Angular animations are defined as states and transitions between states. So after our trigger, we have our state. An animation state is a string value that the developer defines. These states defined the in style of each state. The element the styles are applied to will stay that way, as long as they are still in that same state. A change of state leads to another style being applied, which will cause an element to change to the new style. This change gives the appearance of animation, especially if you do something like move the element to a new position. In this example, we have configured two, states inactive and active. In the inactive state, we use style to animate our element. These properties that we use in style are standard CSS elements that you can animate. One thing to note is that we have to convert elements that are case, such as background color, or text decoration to camel case. Here, we're changing the background color, text color and text decoration when the state becomes inactive. We are also moving the element horizontally to the right by 600 pixels, as well as scaling the element to its regular high. We do this using the CSS transform property. In our active state, we set the background in text to a different color, but instead of moving the element, we simply scale it up. Now we know that states are simply the styles that the elements will end up having, but this course is about animation. That is where transitions come in. Transitions control the timing and switching between states. In our project, we have to transitions, one for switching to each of our states. The first transition handles when we move from inactive to an active state. When this happens, the animate in the transition will be applied. Inside the animate, I have configured the animation timing properties. The first property is the duration of the animation. This specifies how long it will take for the animation to run from beginning to end. The second property is the delay which controls the amount of time between the animation being triggered, and the start of the transition. In this first transition, for example, we will wait one second before the animation runs for two seconds. The final property is easing, which controls how the animation accelerates and decelerates. Easing begins slowly and picks up speed as it progresses. The only property we have to add is the duration, the others are optional. In our second transition, we have a half second delay, followed by a second and a half animation. The ease-in on this animation is ease-out, which starts faster and slows near the end. We could've also defined our styles during our animation if we liked. We do this by adding the styles object after our animation timings. After that, the animation is configured, and we followed that up with our class. First we create a property called state, and then we set it to a string that says active. This will set our initial default state of our element to active. Then after that, we have our toggle state method. This uses a turn area operator to set the state to the opposite of what it is set to when we execute this method. Now, if we look at the at component.html file, which is our template, we can see how we tie all of these together. Nothing special here, we just have a plain button. Inside of this button, we have angular click event handler that will execute the toggle state method. After that, we have our binding for our animation trigger. By proceeding our trigger name with the @ symbol, this now bound to our state. Any element you want to apply the animation to will need this trigger. Now, if I save in preview this project, when the app starts, we see the button on our page. Then when I click the button after a slight delay, the button will move to the right. In addition, the button is scaled down, and the text is changed color and has a strike through. The background of the button is also animated to a different color. Then if I click the button again, it moves back to its original position. Remember, we just change states, so now the button has adopted those styles from the active state. Now, this is a simple example, but now that you understand the basics of how animation works and Angular 2, you can expand on it in your own ads. Now, if we go back to our project, we can look at a few other ways that we can configure animations in our components. First off, we can rewrite our transition in a shorthand way. Now, this shorthand forces us to use the same animation timings for both of our transitions. We could have also run the transition this way as well. Writing the transition like this is also valid the first example is just faster. Either way, the only catch is now both of the animation timings will be the same for each transition. Another thing we can do in our transitions is apply styles that only applied during our transition. If we don't specify styles in the state definition, they will be discarded once the animation is finished. Let's add a style to our transition that will animate the background of our button as it is changing states. Now here we have added a style to our transition that will only apply while our transition is an action. Now, once our transition starts, the color of the button should change. When we click the button, it turns orange, and it remains that color until the transition is finished. Then after that, the style is discarded, so that the styles of the ending state are visible. Now, in addition to the states that we define, Angular 2 also includes a couple special states for your use. The wildcard state matches any animation state we use wildcards the defined styles, no matter what state the animation is in. Now, this uses the wildcard to match any change to any state. If we save the file in Preview, watch what happens. As the project is loaded, the button goes to orange as the state is changed to active when the component is first loaded. This matches any change to any state. So, the transition fires. This is why the button goes orange. Also, when we click on the button, this transition is triggered, since it matches all states. We can use the wildcard to apply animation to all of our states in a very shorthand way. The void state is the other default state that Angular 2 makes available to us. This state can apply to any animation, but only when the element is not attached to a view. The void state is useful for enter and leave animations. You should now have a better idea on how to configure animations in your Angular 2 projects. You can now use animations as you navigate between routes, or when loading data from a remote source, for example. Although it can be a little tricky to configure, you should now be comfortable with the syntax to add the animation annotations to your own components. Thanks for watching the Angular 2 Animations Coffee Break course. Again, this is Reggie Dawson for Tuts+.