.done() FadeOut animation with Bootstrap NavBar doesn't work

[bchavez]

Hello,

This issue is slightly different from #67, #32, and #11.

So, even when the z-order issue is fixed, there's a small fade-out that appears after .done() is called here on Line 93:

Another user (@timothylong / @Typhoon31) dug deeper into why the fade-out animation wasn't working with bootstrap's navbar here: https://github.com/chieffancypants/angular-loading-bar/issues/323

If you remove the bottom elements you'll note that your animation runs fine. But with the 'sub-elements' you only get your fadeIn when it is totally faded in. That's because the z-index is only acknowledged once the animation completes.

not working fade-in-out example: https://jsfiddle.net/3haLx94x/ working fade-in-out example: https://jsfiddle.net/0h7Lw70v/

And here is a slowmo version of the fade-out animation that demonstrates the problem:

You can see the NProgress bar instantly disappear behind bootstrap's navbar when the bar reaches the end.