AngularJS Animation
Animation is a process to achieve some visual effect on the view.
To achieve Animation , you have to do
1) Add “angular-animate.js” to your application.
2) You have to add “ngAnimate” to your application.
Example :
Animation is a process to achieve some visual effect on the view.
To achieve Animation , you have to do
1) Add “angular-animate.js” to your application.
2) You have to add “ngAnimate” to your application.
Example :
<!DOCTYPE
html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<style>
div
{
transition:
all
linear
0.5s;
background-color
: Green;
height:
100px;
width:
100px;
}
.ng-hide
{
height:
0;
width:
0;
background-color:
transparent;
top:-200px;
left:
200px;
}
</style>
<script>
var
app = angular.module('myApp',
['ngAnimate']);
</script>
<body
ng-app="myApp">
<h1>Check
/ Uncheck to show hide div : <input
type="checkbox"
ng-model="mldShowHide"></h1>
<div
ng-hide="mldShowHide">
</div>
</body>
</html>
Output
ngAnimate does not do animation , ngAnimate directive are added to notice event related to animation.The folling is the directive commonly used during animation programmig.
- ng-show
- ng-hide
- ng-class
- ng-view
- ng-include
- ng-repeat
- ng-if
- ng-switch
- ng-animate
- ng-hide-animate
- ng-hide-add
- ng-hide-remove
- ng-hide-add-active
- ng-hide-remove-active
No comments:
Post a Comment