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

它会破坏dom.ready上的myDiv并开始淡出。而它最初应该被隐藏。如何解决？

Answer 1

即使是1.2.22，这个问题仍然存在。但是，其中一种解决方案很容易解决它。

在尝试了这里提到的所有解决方案之后，我想特别强调cocoggu对ac360的建议，因为它是迄今为止最简洁的，它“只是有效”。

正如他所说，只需将ng-hide类添加到违规元素中即可立即解决问题。 - 它可以防止初始动画故障并允许所有后续动画按预期运行。

工作解决方案感谢cocoggu

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

Answer 2

我找到了两种不同的解决方案

最简单的解决方案：为div添加内联样式 style =“display：none”

另一个解决方案是使用 ng-class =“state”

向div添加一个初始类 并在单击按钮时重置班级

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

以及以下css：

.hide {
    display: none;
}

我想我会使用第一个也是最简单的解决方案

答案 2 :(得分：0)

这应该可以解决问题：

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

答案 3 :(得分：-1)

现在已经修复了。升级到1.1.5。

Answer 3

这应该可以解决问题：

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

现在已经修复了。升级到1.1.5。

ngAnimate在ngShow上。第一次启动时防止动画

4 个答案: