I cannot see my mistake within the following snippet. The goal is to have the divs fade in and out whereas my result is that they instantly hide/show. Could someone be as kind as to point out my mistake as I cannot see it.
PLNKR-
HTML/Script
<body ng-controller="test">
<p>
<button ng-click="show=!show">Toggle</button>
</p>
<div ng-show="show"
class="blue-div animate-show">A</div>
<div ng-hide="show"
class="green-div animate-show">B</div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("test",function($scope){
$scope.show=false;
});
angular.bootstrap(document,["app"]);
});
</script>
</body>
CSS
.blue-div{
width:100%;
height:200px;
background-color:blue;
}
.green-div{
width:100%;
height:200px;
background-color:green;
}
.animate-show {
-webkit-transition:all linear 1s;
transition:all linear 1s;
opacity:1;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display:block!important;
}
.animate-show.ng-hide {
opacity:0;
}
I cannot see my mistake within the following snippet. The goal is to have the divs fade in and out whereas my result is that they instantly hide/show. Could someone be as kind as to point out my mistake as I cannot see it.
PLNKR- http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview
HTML/Script
<body ng-controller="test">
<p>
<button ng-click="show=!show">Toggle</button>
</p>
<div ng-show="show"
class="blue-div animate-show">A</div>
<div ng-hide="show"
class="green-div animate-show">B</div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("test",function($scope){
$scope.show=false;
});
angular.bootstrap(document,["app"]);
});
</script>
</body>
CSS
.blue-div{
width:100%;
height:200px;
background-color:blue;
}
.green-div{
width:100%;
height:200px;
background-color:green;
}
.animate-show {
-webkit-transition:all linear 1s;
transition:all linear 1s;
opacity:1;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display:block!important;
}
.animate-show.ng-hide {
opacity:0;
}
3 Answers
Reset to default 8To use Angular's animation system you need to include the ngAnimate module as a dependency within your application.
Reference angular-animate.js and add the module:
var app = angular.module("app", ['ngAnimate']);
Demo: http://plnkr.co/edit/XLsfJokFEvlKFsTByKt5?p=preview
Change your css class to this:
.animate-show {
display:block!important;
-moz-transition:all linear 1s;
-o-transition:all linear 1s;
-webkit-transition:all linear 1s;
transition:all linear 1s;
opacity:1;
}
http://plnkr.co/edit/SRXY4Xr8ibm6nLkkp9XN?p=preview
essentially, it wants:
display:block!important;
I was having the same issue and what I found is that the documentation left off the critical piece as mentioned by tasseKATT.
I would caution using the approach that was selected as the correct answer. This changes things in a place outside of what Angular knows about so it can lead to improper behavior.
Put your transition code in the following class:
.barGraphDiv.ng-hide-add.ng-hide-add-active,
.barGraphDiv.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 5s;
transition: all linear 5s;
}
And then in your app, be sure to inject ngAnimate. This lets angular know to add these classes on ng-show and ng-hide and to wait for the specified time in the CSS before removing them.