angularjs chained fade-in / fade-out transition

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?

标签： angularjs css-transitions fade ng-animate

3条回答

Emotional °昔

2楼-- · 2019-02-01 16:48

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

0人赞添加讨论(0) 举报

何必那么认真

3楼-- · 2019-02-01 16:53

Using the ngAnimate module, you can do this in pure CSS with the -transition-delay directive:

Plunker

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

0人赞添加讨论(0) 举报

Rolldiameter

4楼-- · 2019-02-01 16:54

You can use ng-animate in conjuction with ng-show (http://docs.angularjs.org/api/ngAnimate), available from Angular 1.1.4. Or alternatively simply apply a show class when the model is ticked and apply your show and animation to the class.

<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>

0人赞添加讨论(0) 举报

angularjs chained fade-in / fade-out transition

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间