我在以下代码段中看不到我的错误。目标是让 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;
}
最佳答案
要使用 Angular 的动画系统，您需要将 ngAnimate 模块作为依赖项包含在您的应用程序中。
引用angular-animate.js并添加模块:
var app = angular.module("app", ['ngAnimate']);
关于javascript - 带有 ng-animate 的 ng-show 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22542583/