angularjs - ngShow の ngAnimate。初回起動時のアニメーションを防止する

Question

最近追加された angular.js アニメーション機能をいじっていましたが、期待どおりに動作しません

<style>
    .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;
    }
</style>

<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>

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

http://jsfiddle.net/Kx4TS/1

上の myDiv を台無しにし、dom.readyフェードアウトを開始します。最初は非表示にする必要があります。それを修正する方法は？

Answer 1

この問題は、1.2.22 でも引き続き発生します。ただし、これらのソリューションの 1 つを使用すると、非常に簡単に解決できます。

ここに記載されているすべてのソリューションを試した後、cocoggu の ac360 への提案を特に強調したいと思いました。

彼が示唆するように、問題のある要素に ng-hide クラスを追加するだけで、問題はすぐに解決されます。- 最初のアニメーションの不具合を防ぎ、その後のすべてのアニメーションが期待どおりに動作できるようにします。

cocoggu のおかげで実用的なソリューション

<div id="offending-element" class="ng-hide"></div>

Answer 2

これでうまくいくはずです：

<div ng-class="ng-hide" ng-show="foo == true"  class='myDiv'">

これはここで重要な部分です:ng-class="ng-hide"

編集:コメントで指摘されているように、上記は機能しません。次のようになります。

<div class="ng-hide" ng-show="foo == true"  class='myDiv'">

Answer 3

これは修正されました。1.1.5 にアップグレードします。