Vue Micro-Interaction(β)

Micro interaction library with vue.

Document

Instalation

npm i vue-micro-interaction

Usage

• 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.|