angularjs链接淡入/淡出转换
发布时间:2020-12-17 07:46:29 所属栏目:安全 来源:网络整理
导读:我看过这个页面底部的正式的显示/隐藏转换示例… http://docs.angularjs.org/api/ng.directive:ngShow 我已经尝试修改它,以获得从一个div到另一个div的不间断的渐变转换(转换:不透明0.5s缓和),其中两个div在页面上占据完全相同的位置,以便一个div完全淡出之
我看过这个页面底部的正式的显示/隐藏转换示例…
http://docs.angularjs.org/api/ng.directive:ngShow
我已经尝试修改它,以获得从一个div到另一个div的不间断的渐变转换(转换:不透明0.5s缓和),其中两个div在页面上占据完全相同的位置,以便一个div完全淡出之前的另一个div开始褪色. 在jquery中,它将会像: $("#divA").fadeOut(function() { $("divB").fadeIn(); }); 有没有人有任何建议最好的方式来实现这一点,有关的链接的例子,使用单个模型“检查”来触发过渡?
我使用
ngShow中的示例,基于angular1.2.0-rc.3进行以下
jsfiddle.
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代码,不要忘了包含libraries.js和angular-animate.js angular.module('App',['ngAnimate']); 我希望它能帮助你) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |