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.