Complete guide to angularjs animations from Scratch

In this tutorial , you will learn how to animate DOM elements using angularjs, which translate into underlying CSS animations but are much simpler to use,

 

Setting up the project

Let’s take a look at what we need to add to the project for the animation to work. First, we need to install angular-animate, which we will do by leveraging Bower. We will also use Bootstrap, just to get some good styling of the button. Inside the project folder, run the following command in the shell:

bower install --save angular-animate
bower install --save bootstrap

This will install the appropriate bower component, and it will also update bower.json accordingly. Next, we load the JavaScript file in index.html and also name the controller for our Tutorial’s project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Angular Animation</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="myApp">

<div ng-controller="NgAnimateCtrl">
</div>

<!--(if target dev)><!-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<!--<!(endif)-->
<!--(if target dist)>
<script src="js/fun-with-ng-animate.js"></script>
<!(endif)-->
</body>
</html>

Then, we update controllers.js and we are good to go:

'use strict';
angular.module('myApp.controllers', []).controller('NgAnimateCtrl', function ($scope) {
});



About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest

Shares