Vue Micro-Interaction(β)
Micro interaction library with vue.
Instalation
npm i vue-micro-interactionUsage
- All Components
import Vue from 'vue'
import app from './App.vue'
import vueMicroInteraction from '../src'
Vue.use(vueMicroInteraction)
new Vue({
el: '#app',
render: h => h(app)
})<v-micro-hover-sticky>hover<v-micro-hover-sticky>- Per Component
<script>
import {HoverSticky} from 'vue-micro-interaction'
export default {
name: 'Example',
components: {
HoverSticky,
},
}
</script>HoverSticky
| name | type | default | about |
|---|---|---|---|
| duration | Number | 0.1 | Transition seccond. |
| strength | Number | 1 | Sticky strength. |
| styles | {[key: String]: String} | {} | Styles passed to the parent element. |
Ripples
| name | type | default | about |
|---|---|---|---|
| size | Number | 50 | Diameter pixcel of ripples. |
| time | Number | 500 | Time when ripples are displayed. |
| color | String | #000 | Color of ripples. |
| zIndex | Number | 999 | zIndex of ripples. |
| duration | Number | 0.1 | Transition seccond. |
| styles | {[key: String]: String} | {} | Styles passed to the parent element. |
Shake
| name | type | default | about |
|---|---|---|---|
| eventType | String | click | String to pass to addEventListener. |
| range | {[key: String]: Number} | {x: 2, y: 0, z: 0} | Width of shaking. |
| iteration | Number | 1 | Number of iterations. |
| perspective | Number | 50 | Perspective when shaking in the Z direction. transform: perspective(${perspective}px)
|
| duration | Number | 0.1 | Transition seccond. |
| styles | {[key: String]: String} | {} | Styles passed to the parent element. |