Question

我正在尝试将ng-show元素设置为动画，当它变得可见/隐藏时。但它只是表现为普通的ng-show，instand show / hide。

我找到了这个例子：http://jsfiddle.net/Kx4TS/1/ 哪个工作正常。

然而，如果我使用相同的ng-animate属性和相同的css，它在我的情况下不起作用。还有什么我需要做的或动画不起作用的情况吗？

我的代码如下：

   <div style="" ng-show="item.hasMax()" 
     class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">

和css是：

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

另外，是否有可能让ng-animate像jquery slideDown / slideUp动画那样做？

Answer 1

小提琴示例使用Angular 1.1.4版。确保您还有更新版本的角度可用。我建议你买最新版本。现在它是1.1.5，它有一些重要的错误修复。

Answer 2

使用Angular 1.2改变了动画方法。这是一篇解释差异的文章（year of moo post）。现在它更简单 - 不需要ng-animate。

AngularJS ng-show中的动画

2 个答案: