AngularJS Animate - First hide the list

Question

I'm quite new at Angular and I am trying to create a small fadeIN/OUT animation for lists.

I have two lists, which i can toggle with a button on the top of the page. When a new list is coming, there is a small animation for fade-in and fade-out.

Please see following Plunker:

https://plnkr.co/edit/A8Aozfq2fHuUKQFaJm7l?p=preview

My problem is, that i want a "serial workflow". So when the first list is hided, then should come the second one - At the moment, there is a "parallel workflow". So how can i change that ?

Answer 1

Try increasing transition time. It can help.