- [Instructor] Next, we're going to look at adding some animations and events, but first, let's review how to add an event. So, there are so many types of events, but the good news is that they pretty much act in a similar way. There are two ways to add an event. We can use the on click attribute of an element, or we can use add event listener. Which one you choose often depends on coding style, but when I'm using other frameworks like react, I'll often choose the more declarative on click style. So, declarative means it's visible right there on the element, and you don't have to dig around in the code to find the function.
To compensate for that on the add event listener, I'll group the functions together to make them a little bit easier to find. The other big difference is that the on click can be overwritten, where as the event listener can have many click events. Let's add an on click function. So, I'm coming back to my card object, and this card container is going to get an on click. And that's going to be equal to a function.
And right now, I'm intentionally using an unnamed function. Later, we'll see the benefits of using a named function. Let's take advantage of this on click and console log a few things. First off, the function automatically passes the click event. So, we can say console log. And let's look at two things on the event. The first one is the target, and the second one is the current target. Let's take a look at the difference between the E current target class name, which we've already seen, and the E current target class list.
We'll console log this and look at it in the context of an on click event. Let's see what that looks like over in the browser. I'm going to refresh. When I click on a card element, you'll see the first the first thing that I console logged was the E target, and notice that's the H3. The second thing that I console logged was the current target. The difference between the target and the current target, the H3 is what I actually clicked on, the card container is what has the event listener on it.
I console logged the class name, and we saw this before. It's how we assigned a div a class name. However, there's also a class list, and if there are multiple classes, they come through as an array. We'll see this in just a moment. Finally, I console logged this in the context of the on click event. You'll notice it's the same as the current target. Now that we know what the class list is, let's take a look at how we can use it. Back in our code, we have our on click event.
I'll delete these console logs since we don't need them anymore. And I want to take the E current target, and I'm going to reference the class list. And with the class list, you can add, remove, or toggle classes. So, I'm going to use toggle, and the class I'm going to toggle is going to be the flip card. Let's take a look at what this looks like in the browser. So, I'll come up here and refresh, and let's take a look at what happens when we click on the card.
So, I'll click on a card, and you'll notice as I click, the flip card class is being toggled on and off. Let's add the CSS next. Back in our index file, we'll first add a separate file. So, this is going to be a link, and we'll call it animation CSS. Let's create a new file and save it as animation CSS.
The first thing we're going to do is we're going to take that flip card and the div inside of it, which is called flip, and we're going to put a rotate on it. So, here, we're using some basic CSS 3, and we'll use a transform. And that's equal actually to a function. We're going to use the rotate Y function. And inside of that, we're going to rotate the card 180 degrees.
We want to do the transformation from the center, so let's not forget to add the transform origin and set it to the center. That way it'll rotate nicely around the central axis. Now that we have the rotation, let's add a transition onto just the flip. So, the transition will make it nice and smooth, and we'll do one of about 0.6 seconds. We'll also do a transform style of preserve 3D.
Now, a preserve 3D maintains the 3D transition of an inner item. But rather than tell you what it looks like, let's take a look at w3schools. They've got a good illustration. So, over on w3schools.com under the transform style tab, you'll see about halfway down there's a good demo. Let's view the demo. And I'ma slide this to the left. So, you'll see that the main hello is flat, but the yellow card is twisted or it's at a angle.
And as I rotate this, you'll see it looks pretty flat, but if I turn on preserve 3D, you see that the 3D of the two cards interacting suddenly pops onto the screen. So, that's what we'll be doing. Let's go back to our code. We'll go ahead and add a height and a width to the container so that it maintains its shape. And I'll do 222 pixels here because in addition to the 200 pixel width, there is a 10 pixels of padding and 2 pixels of border.
And a height of 300 pixels. In addition to the flip, typically, you want to move a card over to the right when you flip it over. Let's add a little bit more animation. So, I'm going to do this on the card container. We'll add another class called slide over. We'll add another 3D transform, and this one's going to be a translate, which just means move over, and we'll do 250 pixels.
Let's make sure that there's a transition on that one as well, and we'll set it again to 0.6 seconds. Back in our main JS, let's not forget to toggle that class. So, I'm going to copy and paste, and we'll toggle the slide over class. Let's look at that in the browser. I'm going to refresh, and when I click, it slides over, and it flips over to show the answer.
Now that we have the card flip, let's learn more about this in context.
- Working with prototype and dynamic elements
- Using bind, call, and apply
- Using the Fisher–Yates formula
- When to use e.preventDefault() and when to avoid it
- Drag-and-drop life cycle
- Using prototypical inheritance to optimize your code
Skill Level Intermediate
Q: This course was updated on 1/16/2019. What changed?
A: The following topics were updated: propagation and drag and drop.