"out-in" Animated Transition Isn't Working

I am using animate.css.
<transition mode="out-in" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
  <div v-if="!file">view 1</div>
  <div v-else>view 2</div>
</transition>

It just does not work. The outcome is simply an element hiding and the other one shown like there is no transition.
The transition itself works on elements, but not with “out-in”.

** file is a boolean variable, I tested the changing of it with setTimeOut, buttons etc.

Any ideas?

Edit: Here’s a fiddle:
https://jsfiddle.net/Lzpefj5o/

Any ideas anyone? anything?

This kind of stuff is hard to debug based on what you’ve provided. It’d be best if you can recreate the issue in a jsfiddle.

You can refer to our guide on asking for help for more information. Thanks!

Here’s a fiddle:
https://jsfiddle.net/Lzpefj5o/

I’ll edit the original post to include it, too.