A Vue.js Component To Flip Animation Elements Library

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

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.

Tags: animationflip-elementskgrandemangevue animationvue flipbookvue slide transitionvue-componentsvue-flip