title: Vuejs Animate.css not working
body: <p>Relatively beginner in Vuejs. I am using the Animate.css library for a transition that I want.</p>
  
  <p>Its basically a 4 and 8 column layout when not scrolling , which turns to 1 and 11 when I am scrolling.</p>
  
  <p>It is working fine without the transition , but the overall effect is not pleasurable to the eyes.</p>
  
  <p><a href="http://pogon.co/" rel="nofollow noreferrer">This is the URL , that I am using as inspiration</a></p>
  
  <pre><code>    &lt;div class="column is-4 is-hidden-touch" v-show="! isScroll"&gt;
        &lt;navcomponent :navScroll = "isScroll"&gt;&lt;/navcomponent&gt;
      &lt;/div&gt;
  
      &lt;div class="column is-8" v-show=" ! isScroll"&gt;
        &lt;maincontent&gt;&lt;/maincontent&gt;
      &lt;/div&gt;
  
      &lt;transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in"&gt;
        &lt;div class="column is-1 is-hidden-touch" v-show="isScroll"&gt;
         &lt;navcomponent :navScroll = "isScroll"&gt;&lt;/navcomponent&gt;
        &lt;/div&gt;
  
      &lt;/transition&gt;
  
    &lt;transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in"&gt;
  
      &lt;div class="column is-11" v-show=" isScroll"&gt;
        &lt;maincontent&gt;&lt;/maincontent&gt;
      &lt;/div&gt;
    &lt;/transition&gt;
  </code></pre>
  
  <p>Can anybody please provide pointers what I am doing wrong ?</p>