Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Animate
  • Overview
  • Transcript

2.2 CSS3 Animations

ngAnimate builds on CSS3 animations to animate your AngularJS applications. If you're not familiar with CSS3 animations, I'll teach you the absolute basics in this lesson.

2.2 CSS3 Animations

Angular heavily relies upon CSS for animation. So if you aren't familiar with CSS 3, then this lesson and the next one are for you, because we're going to cover the fundamentals of CSS 3 animations. Now, by all means, if you are familiar with CSS 3 animations, feel free to skip these two lessons and get started learning how to add animation to your angular apps. So here, I have a blank document. Let's add a div element. Let's give it a class. Of box, and we won't have any content here. This is just going to be something that we can visually see on the page. Let's add a style elements, and the box class. Selector and let's make this a perfect square, so width and height are going to set to 100 pixels. Let's also set the background color to something other than white, so that we can see it. I'm going to choose blue. And let's also go ahead and set the position to absolute, because we will probably want to move this element around on the page. Now animation in CSS is a lot like animation with JavaScript, in that we pick the CSS properties that we want to manipulate, and we manipulate them. Except that, it's a lot easier to do with CSS. So let's first of all go to the browser, let's refresh this page, so that we can see that we have a blue box. And now let's say that we want to take this box and we want to increase it's width and height. So that it goes from the 100 pixels to 200 pixels, whenever we hover over the box. So let's add another selector for our box, but let's use the hover pseudo-class. Let's set width to 200 pixels and heighth to 200 pixels. Now, this isn't adding animation yet. All we have done is change the values of height and width. Whenever we hover over the element. So it instantly pops to 200 pixels whenever we move over, whenever we move out it goes back to its original size. We want to transition the height and width, so that whenever we hover over the element it's going to transition from 100 pixels to 200 pixels for both the width and the height. We do that with a property called transition. And we tell it what properties that we want to transition. We can say all, which is going to take all of the properties that we change between the original box class and then the box class with hover. And it will transition those properties. So, we can say all. And then we need the duration, which is in seconds. So you could have the value of 1 and then s for second. But a second is a long time for an animation, so we want something quicker. Let's do 0.03 of a second. And so, whenever we go back to the browser, let's refresh, whenever we hover over the elements, we can see that it animates to its new size. But whenever we move out, it just instantly pops back. There's no animation. And we want that animation there. So what we want to do is instead of putting transition on the hover, we want to put it on the box class itself. Because we want to set up this transition, so that whenever the width and the height changes, we have that transition there automatically. So by putting it in the box class without the hover pseudo class. We now have that transition set, so that whenever we hover over the element, we see the animation. Whenever we move out, we see the animation as well. Now, we don't have to use all here. All is convenient in this case, because all we are changing is the height and the width. But, let's say that the background color is going to become red. So, now that we have this transition set to all, it´s going to transition not only the width and the height, but it will also transition the background color. So we can go back and refresh. And now, we see that the color animates from blue to red as well. Now, in this case that would be something that we would want to do. But in other cases we might now want that. So instead of saying all, we can be specific in what properties that we want to transition. So we can say width, it's going to take three tenths of a second to transition. And, we can also do the same thing for height. We just separate the properties with commas. And, of course, we want the same speed there, or we might not. We might want to say, that the width is going to take three tenths of a second, but the height is going to take one second. Now, of course, we wouldn't normally do this, but for the sake of this demonstration It is useful to see that this is possible. So hovering over the element, we see that the width finishes much faster than the height. Of course, that is due to the different duration that we have set. Normally, these would be the same, so let's go ahead and set them as the same. Well, let's play with the position of the element. Let's start with the element off of the screen, so left is going to be negative 100 pixels, and we are going to transition the left property, so that it slides into view. So transition is simply going to be left, we will keep the duration to be three-tenths of a second, and for the hover class, we will set left to 0. We're not going to change those other properties. Now, because the element is going to start off of the screen, hover is no longer a feasible way of triggering this animation. So instead, we could change this to an actual class. So let's do box-show, and we will add some JavaScript. We can have a link, so that whenever we click on the link, it will toggle this class on our box. So, let's add a link for that. Let's set the href to #, and for the id we'll say, box-control and for the contents, well let's just do Box Control. We need an id on our div elements, so that we can retrieve that easily. So let's just set the id to box and we'll have a class of box. Then we just need our script. So, let's do this with document.getElementById. We want to get our link elements. Now, of course, we could do this in different ways, I'm just typing this off the top of my head. We want to handle the clicky bit and for our events listener, we want to first of all, prevent the default action of the link. So, we will call prevent default, then we want to modify the class list of our box. So once again, documents get element by ID. And I know that this isn't the most efficient way of doing this, but for the sake of this demonstration, it's going to work. We want to use class list, and we want to toggle the box dash show class. And lets also add a top property, because as it is right now, this box is going to cover up our link, whenever we slide it in. So lets add a top of 100 pixels that will give us enough room. So lets go to the browser, lets refresh and box control. We click on the link and our box slides in. We click on it again, and that removes that class, which sets the left property back to negative 100. Now, this approach kind of seems like, I'm cheating. I mean, we have CSS, but we are applying those CSS animations. With JavaScript. But this is exactly what happens in Angular. There's a few other things that go on, but we essentially define different classes. And Angular is going to modify the class lists of the elements with our classes. In the next lesson, we are going to look at Key-frames, which give us more control over our CSS animations.

Back to the top