How angularjs fade in fade out div animation working with cs

see my code

var app = angular.module('myApp', ['ngAnimate']);
app.controller('MainController', function($scope) {
$scope.animate = false;
$scope.play = function() {
$scope.animate = !$scope.animate;
}
});

when animate property getting true then div is appearing with fade in effect and when animate property getting false then div is disappearing with fade out effect.

i see the code but do not understand how css is getting applied with animate property because i am new in angular and trying to learn it.
see the css

.animate-show,
.animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show.ng-hide-remove,
.animate-hide.ng-hide-add.ng-hide-add-active {
opacity: 0;
display: block !important;
}
.animate-hide.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
display: block !important;
}

.animate-show,
.animate-hide

is working with boolean property. there is also other css classes out there associated .animate-show and .animate-hide.

please help me to understand how css working with angular boolean property ?

thanks

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Manikandan Murugesan9y ago
Refer this Artilce in this Link : http://www.c-sharpcorner.com/UploadFile/cd7c2e/fade-in-and-fade-out-animation-using-angularjs/

https://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs