mccainz mccainz - 6 months ago 21
CSS Question

ng-show with ng-animate not working correctly

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;
}

Answer

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;
Comments