在以下代码段中看不到我的错误。目的是使div淡入和淡出，而我的结果是它们立即隐藏/显示。有人愿意指出我的错误，因为我看不见它。
PLNKR- http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview
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
.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;
}
最佳答案
将您的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
本质上，它想要：
display:block!important;
关于javascript - 带有ng-animate的ng-show无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22542583/