A Vue.js Component To Flip Animation Elements Library

vue-flip-elements

Vue flip is a vue.js component that enables you to flip an element on your web application.

vue flip animation examples, css animation flip horizontal, javascript flip image on click, flip card javascript onclick, css flip div horizontal, card flip animation

[Animation] 3D Page Flip Images Effect For Vue component | flipbook

How to make use of it:

Install and download:

# NPM
$ npm install vue-flip --save

Use this template:

<template>
  <vue-flip></vue-flip>
</template>
import VueFlip from 'vue-flip';
export default {
  components: {
    'vue-flip': VueFlip
  }
}
<vue-flip>
  <template v-slot:front>
    front
  </template>
  <template v-slot:back>
    back
  </template>
</vue-flip>

You can activate the flip on the click with:

<vue-flip active-click></vue-flip>
<vue-flip active-hover></vue-flip>
<vue-flip v-model="flipped"></vue-flip>
this.flipped = true; //or false -> to flip front/back

Properties

 DescriptionTypeRequiredDefault Value
active-clickflip on clickBooleanfalsefalse
active-hoverflip on hoverBooleanfalsefalse  
heightcomponent heightStringtrue 
widthcomponent withStringtrue 
transitioncomponent transitionStringfalse0.5s
v-modelbind flip with variableBooleanfalse 
horizontalswitch to horizontal flipBooleanfalsefalse

Flip Elements vue flip Plugin/Github


See Demo And Download

Official Website(kgrandemange): Click Here

This superior jQuery/javascript plugin is developed by kgrandemange. For extra Advanced usage, please go to the official website.