Animations are the effects that makes the visualization attractive and illusionary moving. In AngularJS we can use animations with the following directives :-
| Directive |
Animation Type |
| ngRepeat |
enter, leave and move |
| ngView |
enter and leave |
| ngInclude |
enter and leave |
| ngSwitch |
enter and leave |
| ngIf |
enter and leave |
| ngShow and ngHide |
show and hide |
1.The first thing you need to do is include the angular animate library-
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
2.Next, you need to inject the ngAnimate as a dependency-
var app = angular.module(sampleApp', ['ngAnimate']);
Function of ngAnimate- Angular’s ngAnimate is used to add and remove classes and recognizes certain events and add some pre-defined classes that are then used for making some animations.
Using CSS-
AngularJS animation is based on CSS classes. For each animate event, ngAnimate attaches two classes to the DOM element which are- animation name and animation type with active class.
Using CSS class names-
<div ng-repeat="item in items" ng-animate=" firstanimation ">
...
</div>
. firstanimation-enter {
-webkit-transition: 1s linear all;
transition: 1s linear all;
opacity: 0;
}
. firstanimation-enter. firstanimation-enter-active {
opacity: 1;
}
This is for the fade animation.
Another way of using class name is-
<div ng-repeat="item in items" class=animated-class>
..
</div>
This class name ‘animated-class’ will be used as a reference in CSS and javascript for animations and ng-repeat will add a ng-enter and ng-leave class when adding and removing an item.
CSS code will look like(example)-
.animated-class.ng-enter, .animated-class.ng-move {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:0;
}
How to use with CSS transition?-
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.5s;
background-color: red;
height: 70px;
}
.ng-hide {
height: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="Check1></h1>
<div ng-hide="Check1></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
When the ng-hide gets encountered the transition will take place. CSS transitions basically changes the property of the CSS smoothly.
0 Comment(s)