about 9 years ago
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-
2.Next, you need to inject the ngAnimate as a dependency-
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;}
<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-
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;}
.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>
<!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.
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)