ng-show with ng-animate not working correctly

StackOverflow https://stackoverflow.com/questions/22542583

Question

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;
}
Was it helpful?

Solution 2

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;

OTHER TIPS

To 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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top