Vuejs transition with Animate.css does not working by enter class

You must have the div hidden before the enter animation takes effect, try a vue parameter as a switch

<div transition="fade" class="animated" v-show="visible"> this class is animated </div>

<button @click="visible = ! visible">Click here</button>

Vue.transition('fade',{
    enterClass: 'fadeInUp',
    leaveClass: 'fadeOutLeft'
});

new Vue ({
    el: 'body'
    data: {
        visible: true
    }
});

For me, I had some troubles if I used multiple divs and trying to fade one in and hide others, the solution works for me is to follow up the animation and hide the div, by editing the fade transition directive like so:

Vue.transition('fade', {
    css: true,
    leave: function (el, done) {
        setTimeout(function() {
            $(el).css('display', 'none');
        }, 300);
    }
});

When using Animate.css with Laravel and Vue 2.0+ components you can do this:

<template>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <div class="modal is-active">
            <!-- You Modal Content -->
        </div>
    </transition>
</template>

Hi. I'm having the same problems. This is my code:

<template>
  <transition appear mode="in-out" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
    <div v-if="isSelected" key="tab-message"><slot></slot></div>
  </transition>

</template>

Both fadeOut and fadeIn are occuring ate the same time, even if I take out the fadeOut animation there is a transposition.