Vuejs Animate.css not working

Question

Relatively beginner in Vuejs. I am using the Animate.css library for a transition that I want.

Its basically a 4 and 8 column layout when not scrolling , which turns to 1 and 11 when I am scrolling.

It is working fine without the transition , but the overall effect is not pleasurable to the eyes.

This is the URL , that I am using as inspiration

    <div class="column is-4 is-hidden-touch" v-show="! isScroll">
      <navcomponent :navScroll = "isScroll"></navcomponent>
    </div>

    <div class="column is-8" v-show=" ! isScroll">
      <maincontent></maincontent>
    </div>

    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
      <div class="column is-1 is-hidden-touch" v-show="isScroll">
       <navcomponent :navScroll = "isScroll"></navcomponent>
      </div>

    </transition>

  <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">

    <div class="column is-11" v-show=" isScroll">
      <maincontent></maincontent>
    </div>
  </transition>

Can anybody please provide pointers what I am doing wrong ?

Answer 1

The approach looks good to me. You can always start with a jsFiddle and go from there.

<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
 <div v-if="showWhenCondition">
 </div>
</transition>

A transition and tag with v-if or v-show should be indeed sufficient. Can you detail more what actually happens? Any errors in console?