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 ?

Cristi Jora · Accepted Answer · 2017-06-28 07:29:53Z

9

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?

answered Jun 28, 2017 at 7:29

Cristi Jora

1,75215 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Imran Pochi Over a year ago

No errors just no effect of transition. Problem is , I have to show the div either 4 columns or 1 column

Cristi Jora Over a year ago

Maybe have a basic jsfiddle with simple divs and columns like in your code

Imran Pochi Over a year ago

Thanks mate. Any other CSS library that has subtle transitions and plays well with Vuejs

Cristi Jora Over a year ago

I guess any css library which has classes. You can give vuejs transition's some classes for different transition states (eg. enter-active-class) and as long as it's a valid animation it will work

Peter Csala · Accepted Answer · 2020-07-07 08:27:41Z

5

Try this approach and you will get the result.

One has to attach animate__animated animate__(animation name) with the transition tag only then the specified animation would perform.

<transition appear enter-active-class="animate__animated animate__bounce" leave- 
    active-class="animate__animated animate__jello" mode="out-in">
    <div class="alert alert-info" v-if="show">This is some info</div>  
</transition>

edited Jul 7, 2020 at 8:27

Peter Csala

23.7k16 gold badges51 silver badges96 bronze badges

answered Jul 7, 2020 at 5:27

Mihir Sata

511 silver badge2 bronze badges

1 Comment

Peter Over a year ago

This worked for me!

Imran Pochi · Accepted Answer · 2017-06-30 04:23:44Z

0

Really stupid of me

By mistake I added the animate.css file in the index.html of another project and not the current one.

However , I am not liking the final result.

Do we have any other CSS transitions library that works well with Vuejs ? I dont want to use Javascript hooks for tranitions coz frankly I am at a beginner level.

Something more subtle and easy on the eyes , not disturbing the flow of reading.

answered Jun 30, 2017 at 4:23

Imran Pochi

931 gold badge2 silver badges7 bronze badges

1 Comment

Mathieu Dhondt Over a year ago

I'm late with this, but have a look at wicked css.

Collectives™ on Stack Overflow

Vuejs Animate.css not working

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related