javascript AngularJS ng-show 中的动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17463189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animations in AngularJS ng-show
提问by Roger Johansson
I'm trying to get an ng-show element to animate when it becomes visible/hidden. But it just acts like a normal ng-show, instand show/hide.
我试图让一个 ng-show 元素在它变得可见/隐藏时进行动画处理。但它就像一个普通的 ng-show，instand show/hide。
I found this example: http://jsfiddle.net/Kx4TS/1/which works fine.
我找到了这个例子：http: //jsfiddle.net/Kx4TS/1/工作正常。
yet, if I use the same ng-animate attribute and the same css, it doesn't work in my case. Is there anything else I need to do or cases where animations won't work?
然而，如果我使用相同的 ng-animate 属性和相同的 css，它在我的情况下不起作用。还有什么我需要做的或动画不起作用的情况吗？
my code looks like this:
我的代码是这样的：
<div style="" ng-show="item.hasMax()"
class="box" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
and the css is:
和 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;
}
Also, is it possible to make ng-animate do stuff like the jquery slideDown / slideUp animations?
另外，是否可以让 ng-animate 做像 jquery slideDown / slideUp 动画这样的事情？
回答by Jonas
The fiddle example uses Angular version 1.1.4. Make sure you also have a newer version of angular available. I suggest you get the latest version. Right now it is the 1.1.5, which has some important bug fixes.
小提琴示例使用 Angular 1.1.4 版。确保您还有一个更新版本的 angular 可用。我建议你获取最新版本。现在是 1.1.5，其中有一些重要的错误修复。
回答by Ender2050
The animation approach changed with Angular 1.2. Here's an article (year of moo post) that explains the differences. It's much simpler now - doesn't require ng-animate.
动画方法在 Angular 1.2 中发生了变化。这是一篇解释差异的文章（moo post 年）。现在简单多了 - 不需要 ng-animate。
