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

问题描述

我已经看过了官方的显示/隐藏过渡例如在本页面底部... <一个href=\"http://docs.angularjs.org/api/ng.directive:ngShow\">http://docs.angularjs.org/api/ng.directive:ngShow

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

我试图修改它得到一个无缝过渡褪色：从一个格（过渡不透明0.5S易于在出）给对方，其中两个的div占据了页面上的确切相同的位置，以使一个DIV完全淡出其他分区开始褪色之前。

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.

在jQuery的，这将是简单的：

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?

推荐答案

我以前在 ngShow 基于angular1.2.0-rc.3做出如下的jsfiddle 。

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

该HTML code：

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>

在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 code，不要忘了包括图书馆 angular.js 和角animate.js

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