Angularjs Animation Example - Jquery
How to use animation effect in angularjs?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Animation is an event which is used to create an animation effect on webpage. Angularjs is an web application. Here, css3 transition effect is used to create an animation effect for angularjs.
<html ng-app>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<style>
.animate-enter, .animate-leave
{
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms 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: 30px;
}
.animate-leave.animate-leave-active,
.animate-enter {
opacity: 0;
top: -50px;
height: 0px;
}
</style>
</head>
<body ng-init="names=['Sachin', 'Dhoni', 'Kholi', 'Ashwin', 'Rohit Sharma', 'Ishant Sharma', 'Bhuvanesh Kumar', 'Raina','Murali Vijay'];">
<div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
<form class="form-search">
<div class="input-append">
<input type="text" ng-model="search" class="search-query" style="width: 130px;height:30px;">
<button type="submit" class="btn">Search</button>
</div>
<ul class="nav nav-pills nav-stacked">
<li ng-animate="'animate'" ng-repeat="name in names | filter:search">
<a href="#"> {{name}} </a>
</li>
</ul>
</form>
</div>
</body>
</html>
