javascript 带有 ng-animate 的 ng-show 无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22542583/
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
ng-show with ng-animate not working correctly
提问by mccainz
I cannot see my mistake within the following snippet. The goal is to have the divs fade in and out whereas my result is that they instantly hide/show. Could someone be as kind as to point out my mistake as I cannot see it.
我在以下代码段中看不到我的错误。目标是让 div 淡入淡出，而我的结果是它们立即隐藏/显示。谁能像我看不到的那样好心指出我的错误。
PLNKR- http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview
PLNKR- http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview
HTML/Script
HTML/脚本
<body ng-controller="test">
<p>
<button ng-click="show=!show">Toggle</button>
</p>
<div ng-show="show"
class="blue-div animate-show">A</div>
<div ng-hide="show"
class="green-div animate-show">B</div>
<script>
angular.element(document).ready(function(){
var app=angular.module("app",[]);
app.controller("test",function($scope){
$scope.show=false;
});
angular.bootstrap(document,["app"]);
});
</script>
</body>
CSS
CSS
.blue-div{
width:100%;
height:200px;
background-color:blue;
}
.green-div{
width:100%;
height:200px;
background-color:green;
}
.animate-show {
-webkit-transition:all linear 1s;
transition:all linear 1s;
opacity:1;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
display:block!important;
}
.animate-show.ng-hide {
opacity:0;
}
回答by tasseKATT
To use Angular's animation system you need to include the ngAnimatemodule as a dependency within your application.
要使用 Angular 的动画系统，您需要将该ngAnimate模块作为依赖项包含在您的应用程序中。
Reference angular-animate.jsand add the module:
引用angular-animate.js并添加模块：
var app = angular.module("app", ['ngAnimate']);
回答by SoluableNonagon
Change your css class to this:
将您的 css 类更改为：
.animate-show {
display:block!important;
-moz-transition:all linear 1s;
-o-transition:all linear 1s;
-webkit-transition:all linear 1s;
transition:all linear 1s;
opacity:1;
}
http://plnkr.co/edit/SRXY4Xr8ibm6nLkkp9XN?p=preview
http://plnkr.co/edit/SRXY4Xr8ibm6nLkkp9XN?p=preview
essentially, it wants:
本质上，它希望：
display:block!important;
回答by Digant C Kasundra
I was having the same issue and what I found is that the documentation left off the critical piece as mentioned by tasseKATT.
我遇到了同样的问题，我发现文档遗漏了 tasseKATT 提到的关键部分。
I would caution using the approach that was selected as the correct answer. This changes things in a place outside of what Angular knows about so it can lead to improper behavior.
我会谨慎使用被选为正确答案的方法。这会在 Angular 不知道的地方改变事物，因此它可能导致不当行为。
Put your transition code in the following class:
将您的转换代码放在以下类中：
.barGraphDiv.ng-hide-add.ng-hide-add-active,
.barGraphDiv.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 5s;
transition: all linear 5s;
}
And then in your app, be sure to inject ngAnimate. This lets angular know to add these classes on ng-show and ng-hide and to wait for the specified time in the CSS before removing them.
然后在你的应用程序中，一定要注入ngAnimate. 这让 angular 知道在 ng-show 和 ng-hide 上添加这些类，并在删除它们之前等待 CSS 中的指定时间。
