Vue-touchfeedback NPM

vue-touchfeedback

Touch Feedback plugin for Vue.js 2.0 & 1.0.x

Demo

https://tmiame.github.io/vue-touchfeedback/example/index.html

What?

:point_right::iphone::computer::bangbang: Touch & Mouse & Pointer

Basic

<div v-touchfeedback></div>

Touch the element
When the pointer enters the element. Element add .is-touch class

<div class="is-touch" v-touchfeedback></div>

Click the element
When the pointer click the element. Element add .is-click class

<div class="is-touch is-click" v-touchfeedback></div>

Away the element
When the pointer away from the element. Element remove .is-touch class

<div class="is-click" v-touchfeedback></div>

Remove after the click
Element remove .is-click class

<div class="" v-touchfeedback></div>

Style

div {
  background-color: white;
  &.is-touch {
    background-color: gray;
  }
  &.is-click {
    background-color: blue;
  }
}

Live example on CodePen
https://codepen.io/tmiame/pen/yJQkvA

Animation ~ hover

<div v-touchfeedback:animation.hover></div>

Style

div {
  &.is-touch {
    background-color: red;
    animation: HOVER 1s linear;
  }
}
@keyframes HOVER {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

Touch the element
When the pointer enters the element. Element add .is-touch class

<div class="is-touch" v-touchfeedback></div>

After the animation end
Element remove .is-touch class

<div class="" v-touchfeedback></div>

Live example on CodePen
https://codepen.io/tmiame/pen/BzGrbq

Install

npm(https://www.npmjs.com/package/vue-touchfeedback)

npm install vue-touchfeedback

Download File

<script src="vue.js"></script>
<script src="vue-touchfeedback.js"></script>

Usage

CommonJS

var VueTouchFeedback = require('vue-touchfeedback')
Vue.use(VueTouchFeedback)

Direct include

You can also directly include it with a <script> tag when you have Vue already included globally. It will automatically install itself, and will add a global VueTouchFeedback.