Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
1
Reply
How angularjs fade in fade out div animation working with cs
tri_inn
Jun 16 2017 10:07 AM
260
Reply
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
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
1
)
Next Recommended Forum
Problem with Angular2 Setup in VS2015
Change Tab index on ng-keydown