0.0.2 • Published 2 years ago

vue-micro-interaction v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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

nametypedefaultabout
durationNumber0.1Transition seccond.
strengthNumber1Sticky strength.
styles{key: String: String}{}Styles passed to the parent element.

Ripples

nametypedefaultabout
sizeNumber50Diameter pixcel of ripples.
timeNumber500Time when ripples are displayed.
colorString#000Color of ripples.
zIndexNumber999zIndex of ripples.
durationNumber0.1Transition seccond.
styles{key: String: String}{}Styles passed to the parent element.

Shake

nametypedefaultabout
eventTypeStringclickString to pass to addEventListener.
range{key: String: Number}{x: 2, y: 0, z: 0}Width of shaking.
iterationNumber1Number of iterations.
perspectiveNumber50Perspective when shaking in the Z direction. transform: perspective(${perspective}px)
durationNumber0.1Transition seccond.
styles{key: String: String}{}Styles passed to the parent element.