vue-transitions

Awesome custom Vuejs transition components to make your UI more responsive!

Installation

If you are using node for package management:

# install dependencies
npm install jquery
npm install vue-transitions

Otherwise if you are building your Vue app in plain javascript you can also simply add dist/main-compiled.js to your project. Make sure to add it after jquery and vue, and before your main.js file.

One other requirement is that jquery must be set globally and available on the window as window.$

To do this you can add this code to your main.js

global.jQuery = require('jquery');
const $ = global.jQuery;
window.$ = $;
 

Basics

For .vue components:

// Slide props:
//   :duration - in ms, default: 250ms,
//   :direction - as a string, one of: ['up', 'down', 'left', 'right'], default: 'down'
//   :slideLength - as a number which will be converted to px, default: 10
//   *Note that all props are optional, the absence of a prop will set it to the default*
 
// You can also provide an object with specific durations 
// for enter and leave: {enter: 250, leave: 1000}
<template>
  <div>
    <button @click="toggleDiv()">Toggle</button>
    <Slide :duration="500" :direction="'down'" :slideLength="10">
      <div v-if="showDiv">
        <h1>Linda Belcher</h1>
      </div>
    </Slide>
  </div>
</template>
<script>
// Must import the Slide component with the curly braces
// as it is a nested module in vue-transitions
// You can also import more than one transition like so:
// import { Slide, Expand } from 'vue-transitions'
import { Slide } from 'vue-transitions'
export default {
  components: {
    Slide
  },
  data () {
    return {
      showDiv: false,
    }
  },
  methods: {
    toggleDiv() {
      this.showDiv = !this.showDiv
    }
  }
}

For .js components:

((() => {
  const html = `
<div>
    <button @click="toggleDiv()">Toggle</button>
    <fade-transition :duration="500">
      <div v-if="showDiv">
        <h1>Linda Belcher</h1>
      </div>
    </fade-transition>
</div>
  `
 
  Vue.component("app", {
    template: html,
    data() {
      return {
        showDiv: false,
      }
    },
    methods: {
      toggleDiv() {
        this.showDiv = !this.showDiv
      }
    }
  })
}))()
 

Note that you must use the namespace fade-transition, this may interfere with the namespacing of your other components.

Examples

For a more detailed explanation and interactive example of each of these transitions, open the examples/transition-examples folder. This is a Vue project that showcases the functionality of each of these transitions. There is a README in this folder that will explain how to run the project.