Using the AngularJS framework we can easily create new animations. We just need to add the ng-animate attribute to the HTML element we want to animate and make sure the CSS that applies on our web page includes the required styling for the animation we want to get. The www.nganimate.org website overviews the possibilities.
The following code sample shows how simple it is to use the ng-animate attribute in our code. The sample includes two files. The first file is the HTML file that uses the AngularJS library.
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Animation Demo</title>
<link rel="stylesheet" href="animation.css">
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
</head>
<body ng-init="countries=['Argentina', 'Austria', 'Belgium', 'Canada', 'France', 'Germany', 'Hungary', 'Italy', 'Lebanon'];">
<div>
<form>
<div>
<input type="text" ng-model="str">
<button type="submit" class="btn">Search</button>
</div>
<ul>
<li ng-animate="'animate'" ng-repeat="name in countries | filter:str">
<a href="#"> {{name}} </a>
</li>
</ul>
</form>
</div>
</body>
</html>
The second file includes the CSS styling that describes the animation we want to get. The simplest way to get the code this CSS file would be using one of the available code samples at www.nganimate.org.
.animate-enter,
.animate-leave
{
-webkit-transition: 340ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 340ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 340ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 340ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 340ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.animate-enter.animate-enter-active,
.animate-leave {
opacity: 1;
top: 0;
height: 20px;
}
.animate-leave.animate-leave-active,
.animate-enter
{
opacity: 0;
top: -40px;
height: 0px;
}
The following video clip overviews this code sample, shows its execution and explains it step by step.
You can find more training material for learning the AngularJS framework available for free personal use in my free online courses at http://abelski.lifemichael.com.
