v-show-slide
    TypeScript icon, indicating that this package has built-in type declarations

    1.8.3 • Public • Published

    Travis

    v-show-slide

    A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa.

    • 👻 3kb (1kb gzipped)
    • 📦 No dependencies
    • 🌚 TypeScript support
    • Uses CSS transitions
    • 🕺 Support for custom easings

    Table of Contents

    Overview

    There is no pure CSS way to animate an element to or from height: auto, this Vue.js directive solves this. It works the same way as v-show but will show the element with a sliding animation.

    Demo

    Demo can be viewed here: http://v-show-slide.peterhegman.com/
    Source code for demo can be viewed in src/Demo.vue

    Installation

    Yarn

    yarn add v-show-slide

    NPM

    npm install v-show-slide --save

    Install the Vue plugin

    In your main JS file first import this plugin

    import VShowSlide from 'v-show-slide'

    Install the plugin

    Vue.use(VShowSlide)

    Usage

    Once the plugin is installed the v-show-slide directive can be used in any of your components. This directive works the same way as v-show. If the value is true the element will slide open, if the value is false the element will slide closed.

    Example:

    <template>
      <div id="app" class="app">
        <ul id="features" v-show-slide="featuresOpen" class="features">
          <li>Aliquam lorem</li>
          <li>Praesent porttitor nulla vitae posuere</li>
          <li>Suspendisse nisl elit rhoncus</li>
          <li>Donec mi odio faucibus</li>
          <li>Curabitur suscipit suscipit</li>
        </ul>
        <button
          @click="toggleFeatures"
          class="toggle-features"
          aria-controls="features"
          :aria-expanded="featuresOpen ? 'true' : 'false'"
        >
          {{ featuresOpen ? 'Hide Features' : 'View Features' }}
        </button>
      </div>
    </template>
     
    <script>
    export default {
      name: 'App',
      data() {
        return {
          featuresOpen: false,
        }
      },
      methods: {
        toggleFeatures() {
          this.featuresOpen = !this.featuresOpen
        },
      },
    }
    </script>

    Defining duration and easing

    By default duration is set to 300ms and easing is set to ease.

    To override this, duration and easing can be passed as arguments to the directive. Duration should be defined in milliseconds. Built in easing options are: linear, ease, ease-in, ease-out, ease-in-out

    Duration and easing can be set in this format v-show-slide:duration:easing

    Example:

    <ul v-show-slide:400:ease-in="featuresOpen" class="features">
      <li>Aliquam lorem</li>
      <li>Praesent porttitor nulla vitae posuere</li>
      <li>Suspendisse nisl elit rhoncus</li>
      <li>Donec mi odio faucibus</li>
      <li>Curabitur suscipit suscipit</li>
    </ul>

    Custom easing

    If you want to define custom easing using cubic-bezier this can be done when installing the plugin. Pass an options object as the second parameter in Vue.use.

    Example:

    Vue.use(VShowSlide, {
      customEasing: {
        exampleEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
      },
    })

    Your custom easing can then be used like so (make sure to convert easing name to kebab-case):

    v-show-slide:400:example-easing

    Events

    Events are fired on the same element the directive was defined on. Below are the available events:

    Event Description
    @slide-open-start Fired when the element starts sliding open
    @slide-open-end Fired when the element finishes sliding open
    @slide-close-start Fired when the element starts sliding closed
    @slide-close-end Fired when the element finishes sliding closed

    Example:

    <template>
      <div id="app" class="app">
        <ul
          id="features"
          v-show-slide="featuresOpen"
          class="features"
          @slide-open-start="slideOpenStart"
          @slide-open-end="slideOpenEnd"
          @slide-close-start="slideCloseStart"
          @slide-close-end="slideCloseEnd"
        >
          <li>Aliquam lorem</li>
          <li>Praesent porttitor nulla vitae posuere</li>
          <li>Suspendisse nisl elit rhoncus</li>
          <li>Donec mi odio faucibus</li>
          <li>Curabitur suscipit suscipit</li>
        </ul>
        <button
          @click="toggleFeatures"
          class="toggle-features"
          aria-controls="features"
          :aria-expanded="featuresOpen ? 'true' : 'false'"
        >
          {{ featuresOpen ? 'Hide Features' : 'View Features' }}
        </button>
      </div>
    </template>
     
    <script>
    export default {
      name: 'App',
      data() {
        return {
          featuresOpen: false,
        }
      },
      methods: {
        toggleFeatures() {
          this.featuresOpen = !this.featuresOpen
        },
        slideOpenStart() {
          console.log('Slide Open Start')
        },
        slideOpenEnd() {
          console.log('Slide Open End')
        },
        slideCloseStart() {
          console.log('Slide Close Start')
        },
        slideCloseEnd() {
          console.log('Slide Close End')
        },
      },
    }
    </script>

    Accessibility (A11y)

    This directive will prevent child elements of the sliding element from being focusable when closed. Other than that it does not handle any other aspects of a11y such as adding or removing of aria attributes. Check out the WAI-ARIA Authoring Practices for more information. The most basic setup is to use aria-expanded and aria-controls as shown in the above example.

    Browser Support

    IE / Edge
    IE / Edge
    Firefox
    Firefox
    Chrome
    Chrome
    Safari
    Safari
    iOS Safari
    iOS Safari
    IE11, Edge > iOS 9

    Support

    Please open an issue for support.

    Contributing

    Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

    Install

    npm i v-show-slide

    DownloadsWeekly Downloads

    1,508

    Version

    1.8.3

    License

    GPL-3.0

    Unpacked Size

    204 kB

    Total Files

    39

    Last publish

    Collaborators

    • phegman