Angularjs Ng-show With Ng-animate Unexpected Behavior

The problem is that when I double click very quickly on a button to toggle an ng-show, the value will not change (this is expected behavior - it toggles) but the actual element wil

Solution 1:

I see that you still use AngularJS 1.1.4.

Since 1.2, AngularJS uses a completely different API for animations. Be aware that ng-animate is a separate module now, so you must include it in your scripts and also in your module dependencies list.

You can read more about it this article: Remastered Animation in AngularJS 1.2

Refactored to AngularJS 1.2 -> plunker

html:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-animate.min.js"><divng-app="myApp"><divng-controller='ctrl'><divng-click='clicked()'>[Double Click Me Fast] ng-show:{{foo}}</div><divng-show="foo"class='myDiv'></div></div></div>

js:

angular.module('myApp',['ngAnimate'])
  .controller('ctrl', function ($scope){
    $scope.foo = true;
    $scope.clicked = function(){
       $scope.foo = !($scope.foo);
    }
  });

css:

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
   -webkit-transition: opacity 1s linear;
   -moz-transition: opacity  1s linear;
   -o-transition: opacity 1s linear;
   transition: opacity 1s linear;
   opacity: 1;
}

.myDiv.ng-hide-add, .myDiv.ng-hide-remove{
  display:block!important;
}
.myDiv.ng-hide{
  opacity: 0;
}