angularjs 链式淡入/淡出过渡 [英] angularjs chained fade-in / fade-out transition

问题描述

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

我试图修改它以获得从一个 div 到另一个的无缝淡入淡出过渡(过渡:不透明度 0.5 秒缓入淡出)，其中两个 div 在页面上占据完全相同的位置，以便一个 div在另一个 div 开始淡入之前完全淡出.

在jquery中，它会很简单:

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

对于使用检查"的单个模型来触发转换的链接示例，是否有人对使用 angular 实现此目标的最佳方法有任何建议?

解决方案

我使用了 ngShow 基于 angular1.2.0-rc.3 制作以下 jsfiddle.

html 代码:

点击我:<input type="checkbox" ng-model="checked"><br/><div class="check-element animate-show" ng-show="checked"><span class="icon-thumbs-up"></span>当您的复选框被选中时，我就会出现.
<div class="check-element animate-show" ng-hide="checked"><span class="icon-thumbs-down"></span>当您的复选框被选中时，我会隐藏.

CSS 样式

.animate-show.ng-hide-add,.animate-show.ng-hide-remove {-webkit-transition:所有线性0.5s；-moz-transition:所有线性0.5s；-o-transition:所有线性0.5s；过渡:全线性0.5s；显示:阻止！重要；}.animate-show.ng-hide-add.ng-hide-add-active,.animate-show.ng-hide-remove {行高:0;不透明度:0;填充:0 10px;}.animate-show.ng-hide-add,.animate-show.ng-hide-remove.ng-hide-remove-active {行高:20px；不透明度:1；填充:10px；边框:1px纯黑色；背景:白色；}.check-element {填充:10px；边框:1px纯黑色；背景:白色；}

最后是 JavaScript 代码，不要忘记包含库 angular.js 和 angular-animate.js

angular.module('App', ['ngAnimate']);

希望对你有帮助;)

I have looked at the official show/hide transition example at the bottom of this page... http://docs.angularjs.org/api/ng.directive:ngShow

I have tried to modify it to get a seemless fade transition (transition: opacity 0.5s ease-in-out) from one div to the other, where both divs occupy the exact same position on the page, so that one div completely fades out before the other div begins to fade in.

In jquery, it would be as simple as:

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

Does anyone have any advice on the best way to achieve this with angular, with respect to the linked example, which uses a single model "checked" to trigger the transition?

解决方案

I used the example in ngShow to make the following jsfiddle based on angular1.2.0-rc.3.

The html code:

<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>

The CSS styles

.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;
}

And finally the JavaScript code, don't forget to include the libraries angular.js and angular-animate.js

angular.module('App', ['ngAnimate']);

I hope it helps you ;)

这篇关于angularjs 链式淡入/淡出过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！