In this guide I’m going to show how to do animations using ngAnimate.
We’ll start from a simple example – we want to click a button that will open a div floating from the left side of the screen.
Then we’ll expand that a little bit, because that div will have a button that will open another div that will look as if coming from underneath the first div. Inside that div we’ll have a short form, that upon submit would make its div disappear using a nice sliding animation.
The great thing with using ngAnimate and angular is, that the whole animation part can be done from the CSS. While it can be done from the JS code itself, we would prefer to avoid that most of the time.
So… here we go. Let’s look at the following example:
A side menu that slides from the left
Let’s see a simple ng-if example:
So what do we have here?
In the HTML file I’ve called angularJS (naturally), ngAnimate and angular material design. The app itself is in the script.js file.
When I click the button, ng-if is now truthy and the div shows up. That’s done using the “changeState” function in the js.js file, which changes the value of “in” (true – show, false – hide). The function is triggered by the button click. That’s some angualr magic 🙂
So far nothing new, right? Let’s add the animation:
Changes made for this effect:
JS – Nothing changed.
HTML – Nothing changed.
CSS – I’ve added the file “animation.css” for all of the animation changes taking effect. Since the box has the class “.box”, I enact the animation over this class. Let’s go over the definitions:
- The transition: I define the transition time for the box. Transition time means, the time it takes the element to finish a change in design (e.g. size, color, opacity etc.). Here are the lines that take care of that:
.box {
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
} - ng-leave, ng-enter and the active selector:
ng-leave – Added to the element when it starts to “leave” the DOM, for instance, on ng-if=”false”.
ng-enter – The opposite of “leave” – ng-if=”true”
active selector – This is added for the end of the motion.
Let’s take a look at our CSS code:
Let’s follow our animation sequence:
When I first click the “open menu” button, the ng-if turns to true, and ngAnimate attaches the class: ng-enter to the element. This results in the selector: .box.ng-enter. This is the state the element is at the beginning of the motion. Then, I set the end state by adding another CSS defintion for .box.ng-enter-active. And… we have our transition.
Now let’s add the rightward animation. Clicking the button again turns the ng-if to falsy: and sets the class: .box.ng-leave. We don’t really need it, since we want to use the same starting point on screen, so we skip to handling the “ng-leave-active” class. The selector .box.ng-leave-active would be the end style for the right motion transition (same translate as the ng-enter selector).
For various “angular effects” there are certain css selectors to work with. You can go to the angular documentation in order to see them all: https://docs.angularjs.org/api/ng/service/$animate
In the next part, we’ll add the subdiv for content and some content popup animation.
If there are any questions, feel free to comment below.