Easy animate with a animate store
this is an implementation of animate.css https://github.com/daneden/animate.css
it can use all the feature of animate.css,and only take 37.4K
Install
npm install animate-q
API
Q.getStore
which will show all of the active animate in current state
Q.stop(selector,animate)
which will stop the specific animated element as the first parameter pass in.
Q.click(selector,animate,infinite)
click an element then the animate will be active
pass true for the infinite will active an infinite animation.
Q.hover(selector,animate)
hover an element then the animate will be active
Q.keydown(selector,animate,infinite,keycode)
press a key than the animate will be active.
using a key code in the forth parameter.
You can also choose whether or not to pass a infinite parameter(boolean),if not just pass keycode at third parameter.
https://css-tricks.com/snippets/javascript/javascript-keycodes/#article-header-id-1
then press M button on your keyboard then the animation will be active.
Q.load(selector,animate,infinite)
active an animation when window onload.
Animate option
scale
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp