npm.io
1.1.1 • Published 6 years ago

vue-animate-buttons

Licence
ISC
Version
1.1.1
Deps
0
Size
60 kB
Vulns
0
Weekly
0
Stars
2
SummaryDependencyVersions

Vue button animation set

Start

  npm install vue-animate-buttons -S
Usage
// Global import in main.js
import VueAnimateButtons from 'vue-animate-buttons';
Vue.use(VueAnimateButtons);

// Import on demand in Vue file
import { ButtonBounce, ...... } from 'vue-animate-buttons';

components: {
   'button-bounce': ButtonBounce
},

<button-bounce
  @click="onClick"
  :button-type="'submit'"
  :className="'vue'"
  :is-slot="true"
  :type="'in'"
>
      This is an animation button
</button-bounce>

// CSS Control colors
.vue:before {
   background: red !important;
}
Buttons
name props difference
ButtonBounce styles, click, text, isSlot, className, type type (in , out)
ButtonBubble styles, click, text, isSlot, className, position position (left, right, top, bottom)
ButtonBubbleFloat styles, click, text, isSlot, className, position position (left, right, top, bottom)
ButtonBuzz styles, click, text, isSlot, className
ButtonCurl styles, click, text, isSlot, className, direction direction (top-left; top-right; bottom-right; bottom-left)
ButtonFloatShadow styles, click, text, isSlot, className
ButtonGrow styles, click, text, isSlot, className
ButtonGrowRotate styles, click, text, isSlot, className
ButtonOverlineReveal styles, click, text, isSlot, className
ButtonPop styles, click, text, isSlot, className
ButtonPulse styles, click, text, isSlot, className
ButtonPulseGrow styles, click, text, isSlot, className
ButtonPulseShrink styles, click, text, isSlot, className
ButtonPush styles, click, text, isSlot, className
ButtonRipple styles, click, text, isSlot, className, type type (in, out)
ButtonRotate styles, click, text, isSlot, className
ButtonShrink styles, click, text, isSlot, className
ButtonUnderline styles, click, text, isSlot, className, direction direction (left, center, right)
ButtonUnderlineReveal styles, click, text, isSlot, className
ButtonWobble styles, click, text, isSlot, className, direction direction (horizontal, vertical)
Author

leehormone@yean.net

Keywords

vuejs