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