7.1 Animating Elements With Transitions

In the past few lessons, we have primarily focussed on JavaScript. We spent a little bit of time with CSS, but mostly just adding and removing and toggling classes for an element. So in this lesson, we're going to spend a little bit of time talking about CSS transitions and using them for animation. Now, this can be a little confusing because we have CSS animations and then we have CSS transitions. Well, an animation is something that we set up using key frames. And then we can kick off that animation. And it will run for one time, or any number of times, or it can run indefinitely. But, the thing about an animation is you kick it off and it runs but it's not really useful as far as the user interface is concerned. Now, there are some things we could use an actual animation for. Instead, we would want to use a transition. So, what we are going to do is take this red box and we are going to move it from the left position of 0 over to the left position of 300. And we're going to start with just so that it pops over there. There's not going to be any type of transition. So we're going to start by setting up a click event listener for our button. Because any time we click on that button, we're going to animate that element. So, let's use the getElementById method. We will retrieve our button. And then we will use the addEventListener. We're not going to use jQuery or anything like that in this lesson. This is going to be pure CSS with pure JavaScript and pure DOM. And so, the click event is what we want. Then we will have our function. And inside of this function, we want to retrieve our box element. So, let's say var element =, we will use the querySelector method. And we will just select the element with the box class. And then we will say, element.classList. And let's not add, let's toggle. This way, we will toggle on and off this class. Meaning that whenever we click on the button, it's going to pop on over to whatever we specify for the left property. Whenever we click on the button again, it's going to pop back to zero. And let's just call this class move. So, let's write that class. And we'll just change the left property, and let's do 400px. And so, whenever we view this in the browser, let's click on the Animate button, and we can see that it just pops back over there. So with a transition we essentially say that we want you to transition from the left property over to the value of 400px. We can also specify the amount of time that the transition is supposed to take so that it just animates and then we're good to go. So, in order to perform a transition, we have a transition property. And the first thing we specify is the property that we want to transition. Well, we are going to transition the left property, so we will say left. The next is the amount of time we want the transition to take. And 200ms sounds like a great time. And then we have the function that we want to use for the animation. Now the default is ease, but there is also ease-in, there's ease-out, there's ease-in and out, there's also linear and a few others. But we're just going to go with ease. And so, now whenever we go to the browser, let's refresh the page. We will see that this element transitions in between those two points. Now, if we change any other property, let's add a width here and we'll set the width to 300px. Now, if we go back, it's going to look like it's animating the width. But, really, it's not. It's animating the left. And then right when it gets to the end of the animation, that's when the width of the element changes. And we can prove that by removing the left property from the move class. So now we are just modifying the width. And you can see that width change. Now, if we wanted to also transition the width property, we could change left to just simply all. And so, then any other properties that we modify, well, not any, most of the properties that we modify, like top left, width, height, as well as color, there's a few other properties that will transition. Background color does, but background does not. So now, we are going to see that both left and width transition. It's still kinda hard to see. But if we take out the left once again. And if we just animate with the width. We can see that that does indeed transition as well. Now, what you will see some people do is break out the transition into its own class. So that's the main class box just has the style for the box. It doesn't have anything else. And so, if you wanted to transition, we could call it to move, prepare, or something like that, and the transition would be there. So that then inside of the class attribute for our element, we will add in the .move-prepare. And then whenever we select our elements inside of our click event, instead of selecting the element with a box class, we would look for elements that have a move-prepare class. Because maybe we don't want to animate every box class but we do want to animate every class that has the move-prepare. It's just making our classes, well, a little bit more object oriented. And if we go back to the browser, we are going to see the same results. Even though we have broken that out into a separate class, well, nothing is happening there. And that's because I put in the class incorrectly in the element. So now, let's refresh. And we will see that element transition. And so in the next lesson, we are going to take several concepts from the previous lessons and apply them into a single script. We are going to rewrite the accordion script. But we are going to use pure JavaScript, pure DOM, and CSS transitions. And we might throw in some AJAX just for good measure.