radical-dreamers / animated-vue

A plugin to use animate.css animations as Vue2 transitions
MIT License
220 stars 19 forks source link

Is there a way of controlling the speed of transitions ? #13

Open stijink opened 6 years ago

stijink commented 6 years ago

Hi,

another question. Is there a way / property to control the speed of an transition ? :)

Thanks, Stephan

dragonautdev commented 6 years ago

Hey Stephan,

Thank you for this question, you have actually pointed out a clear weakness in the library as it's not built for easy animation/transition speed customization. That I believe I can fix in the next release without much work. However since that might take me a bit more time than you have available to wait for, I suggest you do the following tweak in the CSS part for the component in which you are using transitions from the library. Let's assume you go with the name I suggested for your custom animation in my previous answer (to your other question in #12), so you should do something like this:

<template>
   <custom-fade-in-out-down id="myCoolAnimation">
      <NewPhotos v-show="isVisible" />
   </custom-fade-in-out-down>
</template>

<style>
   /* 3 seconds animation for your transition, both fade in and out*/
   #myCoolAnimation {
         animation-duration: 3s; 
        -webkit-animation-duration: 3s; 
        -moz-animation-duration: 3s; 
   }
</style>

More information about that can be found in Animate.css github page. Hope this helps while I find some time to add duration and delay customization to the library itself. Thanks again for your interest and questions!

stijink commented 6 years ago

Thank you for your quick and helpful response :-)