vue-active-animation

Vue-active-animation

A vue animation plugin.This package can be used Vue 2.0.

Installation

 npm install vue-active-animation
import vueAnimation from 'vue-active-animation'
vueAnimation.useTemplate() //If you want more animation templates.
Vue.use(vueAnimation)

##API

 import { useTemplate, resetQueue } from 'vue-active-animation';
//Add an animation template.
useTemplate({
    'rotate': {
      'defs': {
        'startAngle': '0deg',
        'targetAngle': '360deg',
        'originX': 'center',
        'originY': 'center'
      },
      'style': '@-webkit-keyframes #animationClass# {\n\
                            0% {\n\
                                -webkit-transform-origin: #originX# #originY#;\n\
                                transform-origin: #originX# #originY#;\n\
                                -webkit-transform: rotate(#startAngle#);\n\
                                transform: rotate(#startAngle#);\n\
                            }\n\
                            100% {\n\
                                -webkit-transform-origin: #originX# #originY#;\n\
                                transform-origin: #originX# #originY#;\n\
                                -webkit-transform: rotate(#targetAngle#);\n\
                                transform: rotate(#targetAngle#);\n\
                            }\n\
                        }\n\
                        @keyframes #animationClass# {\n\
                            0% {\n\
                                -webkit-transform-origin: #originX# #originY#;\n\
                                transform-origin: #originX# #originY#;\n\
                                -webkit-transform: rotate(#startAngle#);\n\
                                transform: rotate(#startAngle#);\n\
                            }\n\
                            100% {\n\
                                -webkit-transform-origin: #originX# #originY#;\n\
                                transform-origin: #originX# #originY#;\n\
                                -webkit-transform: rotate(#targetAngle#);\n\
                                transform: rotate(#targetAngle#);\n\
                            }\n\
                        }'
    }
  });

//Reset queue animation
resetQueue('.block2'); //'.block2' is a selector

Example

 <div class="active">
    <div class="test layer page"
                v-animation.slide="{duration:1500, alternate:true, infinite:true, startX:'-100%'}"
                v-animationend="testCallback2"></div>
    <div class="block2" style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #f00; z-index: 99999;"
               v-queue.fadeIn.slide.slide.rotate="[
                 {duration: 2000, function: 'cubic-bezier(.17,.67,.36,.82)'},
                 {targetX: '200px', targetY: '200px'},
                 {startX: '200px', startY: '200px', targetX: 0, targetY: 0},
                 {targetAngle: '360deg', function: 'linear'}
             ]"
               v-animationend="queueEnd"></div>
    <div class="page" style="z-index: 99999;"
             v-frames="{path: '/static/images/frames/1.home/', filetype: 'jpg', amount: 30, duration: 6000}"
             v-animationend="framesEnd1"></div>
     <div class="lock" 
             v-frames.spritesheet="{'sprite':'/static/images/frames/sprite.png', 'sheet':{'6':[-0,-0],'22':[-0,-45],'24':[-0,-90],'25':[-0,-135],'26':[-0,-180],'27':[-0,-225],'28':[-0,-270],'29':[-0,-315],'30':[-0,-360],'31':[-0,-405],'1':[-0,-450],'2':[-0,-495],'3':[-0,-540],'4':[-0,-585],'5':[-0,-630],'23':[-0,-675],'7':[-0,-720],'8':[-0,-765],'9':[-0,-810],'10':[-0,-855],'11':[-0,-900],'12':[-0,-945],'13':[-0,-990],'14':[-0,-1035],'15':[-0,-1080],'16':[-0,-1125],'17':[-0,-1170],'18':[-0,-1215],'19':[-0,-1260],'20':[-0,-1305],'21':[-0,-1350]}, 'duration':2000, 'infinite':true, alternate:true}"></div>
</div>

License

MIT