vue-jump-coin

a plugin that moving a element to a sepcify position with animation for vue.js 2+

demo

Usage

install

npm install vue-jump-coin --save

Quickstart

// before start
import JumpCoin from 'vue-jump-coin'
Vue.use(JumpCoin)

// in your code

let opts = {
  quietUrl: require('path/to/coin.png'),
  url: require('path/to/coin.gif')
}
// the start and target element you need to define
let originElm,
    targetElm
let newCoin = this.$jumpcoin.create(originElm, opts)
setTimeout(() => {
  newCoin.go(targetElm, () => {})
}, 100)

More

Use animate.css to keep the target element alive

<link rel="stylesheet" href="path/to/animate.css">

Options

Parameter	Type	Default	Description
type	string	coin	go and clear methods will return this type to distinguish instance
size	number	30	image width and height size (px unit)
duration	number	300	duration to arrive (ms unit)
function	string	ease-out	the time funciton for moving element
animate	string		the animate.css animation for target element when element arrived
quietUrl	string		dynamic image url (.gif) for something you want to move
url	string		static image url to prevent dynamic image can't render out in duration time

Methods

/*
* params
*   element<node> create the jumpCoin in a element's center
*   options<object> config for jumpCoin
* return a vue component instance
**/
Vue.jumpcoin.create(element, options)

/*
* params
*   element<node> move to this element
*   callback<function> apply this callback when jumpCoin arrived target element, callback will pass instance's type back
**/
jumpCoinInstance.go(element, callback)

/*
* params
*   callback<function> apply this callback when jumpCoin disappered, callback will pass instance's type back
**/
jumpCoinInstance.clear(callback)

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# make UMD file for npm package
npm run make

License

MIT