NgAnimate на ngShow. Предотвращение анимации при первом запуске

Я играл с недавно добавленной функцией анимации 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 и начинает его исчезать. В то время как он изначально должен быть скрыт. Как это исправить?

Ответ 1

Теперь это исправлено. Обновите до 1.1.5.

Ответ 2

Этот вопрос по-прежнему сохраняется и сейчас с 1.2.22. Однако одно из этих решений решает его очень легко.

Попробовав все решения, упомянутые здесь, я хотел особо выделить предложение cocoggu для ac360, поскольку оно на сегодняшний день является самым кратким и "просто работает".

Как он предлагает, просто добавление класса ng-hide в вызывающий элемент немедленно устраняет проблему. - Он предотвращает первоначальный сбой анимации и позволяет всем последующим анимациям вести себя так, как ожидалось.

Рабочее решение благодаря cocoggu

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

Ответ 3

Я нашел 2 разных решения для вашей проблемы

Самое простое решение: Добавьте встроенный стиль в div style = "display: none"

Другим решением является добавление начального класса в div с ng- class= "state" и reset класс при нажатии кнопки

function ctrl($scope){
    $scope.state = 'hide';
    $scope.foo = false;
    $scope.clicked = function() {
       $scope.state = undefined;  
       $scope.foo = !($scope.foo);
    }
}

вместе со следующим css:

.hide {
    display: none;
}

Я думаю, что я бы использовал первое и самое простое решение

Ответ 4

это должно сделать трюк:

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

это важная часть здесь: ng-class="ng-hide"

EDIT: Как указано в комментариях, вышесказанное не будет работать. Он должен выглядеть следующим образом:

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