mcc*_*inz 1 javascript css angularjs ng-animate
我无法在下面的片段中看到我的错误.目标是让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']);
演示: http ://plnkr.co/edit/XLsfJokFEvlKFsTByKt5？p =preview
将您的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;
| 归档时间： |
|
| 查看次数： |
10123 次 |
| 最近记录： |