Fade out element completely before fading another in

Question

As you can see from this jsfiddle:

I'm trying to fade out an element and fade another in using Angular animations.

The fading (using opacity and transitions) works. However, as you'll see, it displays the previously hidden element before hiding the current element on display. That leaves you with both elements on display at once.

Question

Is there a way to wait until the first element has been completely hidden before showing the second element? Pretty sure I can do this with a custom directive but before going down that route I'd like to be sure there's no out-of-box way.

What I've tried

a) Put a transition-delay on the element being faded in:

.ng-hide-remove {
    -webkit-transition: all 1s ease 1s;
    transition: all 1s ease 1s;
    opacity: 0;
}

b) Use a height property

This won't work for me because the divs that I'm hiding in my app are part of a grid system.

Note

If I was to implement this in jQuery, it'd be:

elementToFadeOut.fadeOut(1000, function() {

    elementToFadeIn.fadeIn(1000);

});

The best thing I can suggest is using this rule: `.ng-hide-remove-active { position:absolute; }` ([jsFiddle](http://jsfiddle.net/rsyVL/)). But this is not exactly what you need... — Oleg, Feb 18 '14 at 12:50
Thanks @Zub. Yeh, nice solution, though it does cause the page to jump a little (e.g. if there is content below it) which isn't ideal. I'll post a solution to custom directive that does this when I get the chance. — Rob Campion, Feb 19 '14 at 10:19
See [angularjs-chained-fade-in-fade-out-transition](http://stackoverflow.com/a/24751641/1612562) for a pure CSS solution. — rphv, Jul 15 '14 at 07:48
@rphv incorrect. The solution in the link doesn't stop the container div from jumping (which is the real problem here). For example, if you had text below the img in your plunker (which is hard to do anyway as they're positioned absolutely), it would jump during the transition. — Rob Campion, Jul 15 '14 at 11:28

score 3 · Accepted Answer · answered Feb 27 '14 at 14:41

Fixed:

http://jsfiddle.net/robcampo/pWGuS/10/

Used part of Zub's suggestion but also set the height of the container div dynamically so that it doesn't flicker when transitioning.

To achieve this, a directive was created and added to each of the corresponding fading elements (those with ng-show). This directive compares its element's height with that of the parent. If the parent has a lower height, it updates the parent (this prevents flickering):

if (height > parentHeight) {
    $(element).parent().height(height);
}

To ensure not all ng-show/hides fade in/out, a the directive animateFade doubles as a CSS class that is applied to the fading animations:

.animate-fade.ng-hide-add {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1;
}

Fade out element completely before fading another in

1 Answers1