javascript - AngularJS ng-show 中的动画

我正在尝试让一个 ng-show 元素在变为可见/隐藏时执行动画。但它只是像普通的 ng-show 一样，即刻显示/隐藏。

我找到了这个例子：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 动画那样的效果？

答案＃1

这个 fiddle 示例使用的是 Angular 1.1.4 版本。请确保你也有可用的更新版本的 Angular。我建议你获取最新版本。目前是 1.1.5，它有一些重要的 bug 修复。

答案＃2

动画方法在 Angular 1.2 中发生了变化。这里有一篇文章（moo 博客年份的帖子）解释了这些差异。现在简单得多 - 不需要 ng-animate。