AngularJS ng-show具有ng-animate意外行为

Question

问题是当我在一个按钮上快速双击以切换ng-show时，该值不会改变（这是预期的行为 - 它会切换）但实际的元素将被隐藏。见这里：http://jsfiddle.net/QbZrJ/

如果快速双击，则值保持为true，但元素会淡出。如果删除ng-animate指令，它会按预期工作，所以我想这与动画有关。

function ctrl($scope){
   $scope.foo = true;
   $scope.clicked = function(){
      $scope.foo = !($scope.foo);
   }
}

那里没什么可腥的。请注意，这是在AngularJS中使用旧的动画方式，但我也观察到AngularJS 1.2.8中的行为。

编辑：我认为动画持续时间是一些故障排除后的问题。似乎0延迟它工作正常。在任何非零的情况下，它都会忽略它应该被隐藏并完成动画的事实。

Answer 1

我发现你仍然使用AngularJS 1.1.4 。

由于 1.2 ，AngularJS使用完全不同的动画API。 请注意 ng-animate现在是一个单独的模块，因此您必须将其包含在脚本中以及模块依赖项列表中。

您可以在本文中详细了解：Remastered Animation in AngularJS 1.2

重构为AngularJS 1.2 - ＆gt; plunker

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-animate.min.js">
<div ng-app="myApp">
     <div ng-controller='ctrl'>
        <div ng-click='clicked()'>[Double Click Me Fast] ng-show:{{foo}}</div>  
        <div ng-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;
}