angularjs链接淡入/淡出转换

我看过这个页面底部的正式的显示/隐藏转换示例… 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']);

我希望它能帮助你)

原文地址：https://www.jb51.cc/angularjs/143072.html