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']);

我希望它能帮助你)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!