Slide Up/Download Animation For Vue – v-show-slide

Install & Download:

# Yarn
$ yarn add v-show-slide
# NPM
$ npm install v-show-slide --save

Description:

v-show-slide is a Vue.js directive to show/hide elements with configurable slide up/down animations.

How to use it:

Import & register the directive

import VShowSlide from 'v-show-slide'

Vue.use(VShowSlide)

Use the directive.

<template>
  <div id="app" class="app">
    <ul id="features" v-show-slide="featuresOpen" class="features">
      <li>Features 1</li>
      <li>Features 2</li>
      <li>Features 3</li>
    </ul>
    <button
      @click="toggleFeatures"
      class="toggle-features"
      aria-controls="features"
      :aria-expanded="featuresOpen ? 'true' : 'false'"
    >
      {{ featuresOpen ? 'Hide Features' : 'View Features' }}
    </button>
  </div>
</template>

export default {
  name: 'App',
  data() {
    return {
      featuresOpen: false,
    }
  },
  methods: {
    toggleFeatures() {
      this.featuresOpen = !this.featuresOpen
    },
  },
}