asika32764 / vue-animate

A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
https://vue-animate.simular.co/
Other
1.36k stars 132 forks source link

How do I set up duration of the animation???? #9

Closed andrisole92 closed 7 years ago

andrisole92 commented 7 years ago

Any help please

asika32764 commented 7 years ago

This is css file so the duration is hard code in style.

You can change duration here and re-compile LESS file for yours. https://github.com/asika32764/vue2-animate/blob/master/src/vue2-animate.less#L10

andrisole92 commented 7 years ago

I need fade to be fast in one place and slow in another. Can I achieve that? It seems like no

asika32764 commented 7 years ago

Just modify css directly https://github.com/asika32764/vue2-animate/blob/master/dist/vue2-animate.css#L452

If you want to use different duration to same effect, you can only copy and rename it.

asika32764 commented 7 years ago

Another way is to use jQuery to do animation you want, remember to wrap it by a component or directive.

The DOM animation is jQuery's job not Vue's.

DaxChen commented 7 years ago

I just added

.foo {
  animation-duration: 0.3s
}

to override the style and it works!

example:

<transition name="fade">
  <p v-if="show" style="animation-duration: 0.3s">hello</p>
</transition>