AngularJS ng-show中的动画

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,它有一些重要的错误修复.