1.0.0 • Published 6 years ago
vue-proximity-feedback v1.0.0
Vue Proximity Feedback
Installation
npm install vue-proximity-feedback --save
Usage
register the component.
window.Vue = require('vue') Vue(ProximityFeedback, require('vue-proximity-feedback'))
create a css animation
@keyframes pulse { to { transform: scale(1.4); } } .pulse { animation: pulse 0.25s ease infinite alternate; }
usage
<proximity-feedback ref="pfb" tag="div" animation-class="pulse" :distance="{min: 10, max: 400}" :divide-by="125" @click.native="doSomthing()"> <i class="fa-search"></i> </proximity-feedback>
you can conditionaly start / stop the mouse tracking through
```js this.$refs.pfb.stop() this.$refs.pfb.start() ```
prop required type default description tag :x: string span animationClass :white_check_mark: string distance :x: object {min: 0, max: 100} divideBy :x: number 100 proximity / divideBy = animation speed
TODO
- fix frame stutter when animation speed change.
1.0.0
6 years ago