Monday 11 November 2013

AngularJS - ngAnimate in Filter Array Items 3D Rotate

AngularJS - ngAnimate in Filter Array items

In this tutorials, we are discuss about ngAnimate in filter array items. The ngAnimate with the some of the directives,

Directive name	Animation type
ngRepeate	enter, leave and move
ngView	enter and leave
ngInclude	enter and leave
ngSwitch	enter and leave
ngIf	enter and leave
ngShow	show
ngHide	hide

Filter array items in 3D rotate using ngAnimate.

index.html

<!DOCTYPE html>
<html ng-app>

<head>

<link rel="stylesheet" href="style.css">

<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>

</head>

<body ng-init="products=['iPhone', 'Samsung', 'HTC', 'Nokia' , 'Sony',

'iPhone 5c' 'Apple', 'iPad', 'Lava', 'Surface']; ">

<div class="well">

<form class="form-search">

<input type="text" ng-model="search" placeholder="Filter items..">

<ul>

<li ng-animate=" 'animate' " ng-repeat="product in products |  filter : search">

<a href="#">{{product}}</a>

</li>

</ul>

</form> 

</div> 

</body> 

</html>

Stylesheet file. Support all borwsers.

style.css

.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-leave.animate-leave-active,

.animate-enter {

-webkit-transform : rotateX(90deg)  rotateZ(90deg);

-moz-transform : rotateX(90deg)  rotateZ(90deg);

-ms-transform : rotateX(90deg)  rotateZ(90deg);

-o-transform : rotateX(90deg) rotateZ(90deg);

transform : rotateX(90deg)  rotateZ(90deg);

opacity : 0;

height : 0px;

}

.animate-enter .animate-enter-active,

.animate-leave {


-webkit-transform : rotateX(0deg)  rotateZ(0deg);

-moz-transform: rotateX(0deg) rotateZ(0deg);

-ms-transform : rotateX(0deg) rotateZ(0deg);

-o-transform : rotateX(0deg) rotateZ(0deg);

transform: rotateX(0deg) rotateZ(0deg);

opacity : 1;

height :30px;

}

Demo - Filter Array Items - 3D Rotate

If have any doubts about this tutorial means post comments.

Touch with me! Gain more.