我看过本页底部的官方显示/隐藏转换示例... http://docs.angularjs.org/api/ng.directive:ngShow
我试图修改它以获得从一个 div 到另一个的无缝淡入淡出过渡(过渡:不透明度 0.5 秒缓入淡出),其中两个 div 在页面上占据完全相同的位置,以便一个 div 完全淡出在另一个 div 开始淡入之前。
在 jquery 中,它会很简单:
$("#divA").fadeOut(function() { $("divB").fadeIn(); });
对于使用“检查”的单个模型来触发转换的链接示例,是否有人对使用 angular 实现此目的的最佳方法有任何建议?
最佳答案
我使用了 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']);
我希望它可以帮助你;)
关于angularjs 链式淡入/淡出过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19579335/