Angular bootstrap animated tabs transition in but not out

Question

I'm trying to add an animated slide effect when different tabs are chosen on a page. So far it only half works.

I'm using animate.css as I hoped it would make things pretty simple, but I'm finding that the transitions only seem to affect content on it's way in, and not on the way out (ie content bounces in correctly, but does not slide out).

I have seen this unanswered question, which seems to address the same issue, but did not help me find an answer (https://stackoverflow.com/questions/19961952/angularjs-1-2-animations-with-animate-css-hide-animation-doesnt-seem-to-fire).

Can anybody point me in the right direction?

plunker here: http://plnkr.co/edit/cERDGS2zvUxOyqboFZXT?p=preview

Thank you

Answer 1

You could overwrite bootstrap's css inside the tabbed area:

.tab-content>.tab-pane {
    display: none;
}

with

.tab-content>.tab-pane {
    display: block;
}

Then you could do some CSS/JS trickery to position the other elements absolutely so it does not through off the layout. I am actually having the same exact issue. I saw this post and I think it helped me to solve my problem as well. Thanks and I hope this helps.

My plunkr: http://plnkr.co/edit/tgpyZq3JD1hwxtwCwWv8?p=preview