Micro interaction library with vue.
Document
npm i vue-micro-interaction
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>
<script>
import {HoverSticky} from 'vue-micro-interaction'
export default {
name: 'Example',
components: {
HoverSticky,
},
}
</script>
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. |
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. |
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. |