Login/Register
angularjs chained fade-in / fade-out transition
Asked Answered
angularjscss-transitionsfadeng-animate
L

3

15

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?

Laban answered 25/10, 2013 at 0:56 Comment(3)
I think i need more info... what would trigger the fading effects? Can you give an example using more sample code? – Vow
I could, but I think I can describe it with reference to the example in the link. In that example, the two animating divs with the class="check-element animate-show" attribute, they both animate at the same time (ie they're both visible while they're animating). A very common scenario I make use of in jquery is to fade-out/hide the first div, and once its hidden, then fade-in/show the second div in the exact same location on the page. In other words, to cleanly fade-out some content and then fade-in the replacement content - with only one of the content divs visible at any point in time. – Laban
Did you use any of these answers? If so, you should accept the chosen answer. – Loop
G
11

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

Giorgi answered 3/11, 2013 at 14:23 Comment(1)
Firstly, thank you for the code. Secondly, upon reflection, defining custom css styles is exactly why developers prefer a "fadeOut" function. So that we don't have to dive into CSS. I realize that many are against including jQuery alongside Angularjs, but to avoid custom styling, it appears this maybe necessary. – Kare
A
9

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;
}
Aphesis answered 15/7, 2014 at 6:49 Comment(2)
Requires position:absolute unfortunately. May be not the best solution for complex pages. – Jarvisjary
Just used this for 2 divs occupying the same space - works like a charm! – Natty
K
0

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>
Kongo answered 25/10, 2013 at 12:6 Comment(2)
Thanks for replying but think you have missed the point. The problem is not how to apply an animation to the show, its the fact that two animations (one hide and one show) are triggered off the same model element, and the animations need to run in series, not concurrently. The hide animation needs to runs to completion first, and then the show animation. Is this possible? – Laban
Ah I see, I'd address that by setting ng-class from a function, Ill update my example. – Kongo

© 2022 - 2024 — McMap. All rights reserved.