ngAnimate
module in your application :<!DOCTYPE html>
<html>
<head>
<title>AngularJS Animations</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<style type="text/css">
div{
transition: all linear 0.5s;
background-color:#0099da;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
}
.site_name{
padding:30px 0px;
text-align:center;
color:#FFF;
}
</style>
<body ng-app="myApp">
<h2>Hide the DIV : <input type="checkbox" ng-model="myCheck"></h2>
<div ng-hide="myCheck">
<h2 class="site_name">www.freetimelearning.com</h2>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
The ngAnimate module does not animate HTML elements itself. It only adds and removes some pre-defined classes to make animations when ngAnimate notice certain events, like hide or show of an HTML element.
The Following directives in AngularJS who add/remove classes :
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
The ng-show
and ng-hide
directives adds or removes a ng-hide
class value.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS CSS Transitions</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<style type="text/css">
div{
transition: all linear 0.5s;
background-color:#0099da;
height: 100px;
width:100%;
}
.ng-hide {
height: 0;
}
.site_name{
padding:30px 0px;
text-align:center;
color:#FFF;
}
</style>
</head>
<body ng-app="myApp">
<h2>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h2>
<div ng-hide="myCheck">
<h2 class="site_name">www.freetimelearning.com</h2>
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>AngularJS CSS Animations</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<style type="text/css">
@keyframes myChange {
from {
height: 100px;
} to {
height: 0px;
}
}
div {
height: 100px;
background-color:#0099da;
}
div.ng-hide {
animation: 0.5s myChange;
}
.site_name{
padding:30px 0px;
text-align:center;
color:#FFF;
}
</style>
</head>
<body ng-app="ngAnimate">
<h2>Hide the DIV : <input type="checkbox" ng-model="myCheck"></h2>
<div ng-hide="myCheck">
<h2 class="site_name">www.freetimelearning.com</h2>
</div>
</body>
</html>