use*_*486 15 fade css-transitions angularjs ng-animate
我查看了本页底部的官方显示/隐藏转换示例... http://docs.angularjs.org/api/ng.directive:ngShow
我试图修改它以从一个div到另一个div获得无缝淡入淡出过渡(过渡:不透明度0.5s缓入),其中两个div占据页面上完全相同的位置,因此一个div完全淡出在另一个div开始淡入之前.
在jquery中,它将如下所示:
$("#divA").fadeOut(function() { $("divB").fadeIn(); });
有没有人对使用角度的最佳方法有任何建议,相对于链接的例子,它使用单个模型"检查"来触发转换？
小智 11
我用的例子ngShow作以下的jsfiddle基于angular1.2.0-rc.3.
HTML代码:
<div ng-app="App">
Click me: <input type="checkbox" ng-model="checked"><br/>
<div class="check-element animate-show" ng-show="checked">
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
</div>
<div class="check-element animate-show" ng-hide="checked">
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
</div>
</div>
CSS样式
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
line-height:0;
opacity:0;
padding:0 10px;
}
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}
.check-element {
padding:10px;
border:1px solid black;
background:white;
}
最后是JavaScript代码,不要忘记包含库angular.js和angular-animate.js
angular.module('App', ['ngAnimate']);
我希望它可以帮助你;)
使用ngAnimate模块,您可以使用-transition-delay指令在纯CSS中执行此操作:
HTML
<body ng-app="ngAnimate">
Click me: <input type="checkbox" ng-model="checked">
<br/>
<img ng-show="checked" src="img1.jpg">
<img ng-hide="checked" src="img2.jpg">
</body>
CSS
img {
position: absolute;
}
.ng-hide-add-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.ng-hide-remove-active {
display: block!important;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.ng-hide {
opacity: 0;
}
您可以将 ng-animate 与 ng-show ( http://docs.angularjs.org/api/ngAnimate )结合使用，从 Angular 1.1.4 开始提供。或者，只需show在勾选模型时应用一个类，并将您的显示和动画应用到该类。
<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>
| 归档时间： |
|
| 查看次数： |
38357 次 |
| 最近记录： |