AngularJS链式淡入/淡出过渡

我看过本页底部的官方显示/隐藏过渡示例...http://docs.angularjs.org/api/ng.directive:ngShow

我试图修改它以获得从一个div 到另一个div 的无缝淡入淡出过渡（过渡：不透明度 0.5 秒缓入），其中两个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代码，不要忘记包含库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>

相关内容

最新更新

热门标签：