2

我正在测试最新的 angularJS 版本 1.1.5 中的动画，它似乎无法正常工作。请检查这个小提琴

html:

<div ng-app>
     <div ng-controller='ctrl'>
        <input type='button' value='click' ng-click='clicked()' />  
        <div ng-show="foo == true"  class='myDiv' ng-animate="{show: 'fadeIn', hide:'fadeOut'}">

        </div>

    </div>
</div>

CSS：

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
}
.fadeIn-setup, .fadeOut-setup {
  -webkit-transition: 1s linear opacity;
  -moz-transition: 1s linear opacity;
  -o-transition: 1s linear opacity;
  transition: 1s linear opacity;
}
.fadeIn-setup{
  opacity:0;
}
.fadeOut-setup{
  opacity:1;
}
.fadeIn-setup.fadeIn-start {
  opacity: 1;
}
.fadeOut-setup.fadeOut-start{
    opacity:0;
}

AngularJS：

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

但是，当我切换回 1.1.4 版时，它工作正常，但有另一个错误，他们说它已在 v1.1.5 中修复。现在这令人困惑。他们用更新的错误修复了以前的错误？无论如何，任何帮助将不胜感激。

4

1 回答 1

5

因此，经过几个小时的挖掘，我找到了解决方案，所有文档都已过时，并且没有更新到最新的 API。这是解决方案：

https://github.com/angular/angular.js/commit/11f712bc

根据更改日志：

CSS 过渡类已更改后缀。要迁移重命名：
.foo-setup {...} 到 .foo {...}
.foo-start {...} 到 .foo-active {...}

或用于类型：进入、离开、移动、显示、隐藏：
.foo-type-setup {...} 到 .foo-type {...}
.foo-type-start {...} 到 .foo-type-active {...}
于 2013-06-26T00:46:38.847 回答