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 {...}

または type: enter、leave、move、show、hide:
.foo-type-setup {...} から .foo-type {...}
.foo-type-start {...} から .foo-type-active {...}
于 2013-06-26T00:46:38.847 に答える