<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<script>
angular.module('animateApp',['ngAnimate'])
.controller("MainController", function($scope){
});
</script>
There are two important changes
When ng-animate is included in your angular app, some directives automatically create special classes, used to drive the animations.
For example, ng-if will now use the classes:
becoming hidden: ng-leave ng-leave-active ng-animate
becoming shown: ng-enter ng-enter-active ng-animate
<button ng-init="hidden = false" ng-click="hidden = true" ng-if="hidden">
.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.ng-enter.ng-enter-active {
opacity:1;
}
.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.ng-leave.ng-leave-active {
opacity:0;
}
.ng-hide {
transition:0.5s linear all;
opacity:0;
}
.fast-fade {
transition: 0.5s linear all;
}
.slow-fade {
transition: 3s linear all;
}
.ng-enter {
opacity: 0;
}
.ng-enter.ng-enter-active {
opacity: 1;
}
.ng-leave {
opacity: 1;
}
.ng-leave.ng-leave-active {
opacity: 0;
}
.ng-hide {
opacity: 0;
}
.big {
font-size: 50px;
}
.small {
font-size: 40px;
}
.ng-animate.big-add, .ng-animate.small-add {
transition: 1s linear font-size;
}
<div ng-class="{big: toggleBoolean, small: !toggleBoolean}">