A simple interface but realizes very flexible and powerful slide animation

by Vue.js Examples

vue-slide-up-down-component

It is a simple interface but realizes very flexible and powerful slide animation, for Vue!

Like jQuery's slideUp / slideDown, but for Vue!

View demo Download Source

Installation

npm i vue-slide-up-down-component

Usage with Webpack or other module bundlers:

import VueSlideUpDown from 'vue-slide-up-down-component'
// or
const VueSlideUpDown = require('vue-slide-up-down-component')

Vue.component('vue-slide-up-down', VueSlideUpDown)

Usage

The component takes three props:

  • active (Boolean): Whether to show the component (true) or not (false)
  • duration (Number): How long the animation is supposed to be, in milliseconds. Defaults to 500.
  • tag (String): Which HTML tag to use for the wrapper element. Defaults to div.
<div class="MyContent">
  <h1>Always show this</h1>
  <vue-slide-up-down :active="active" :duration="1000">
    Only show this if "active” is true
  </vue-slide-up-down>
</div>

Custom transition-timing-function

If you want to use a different timing function, add some CSS for your <vue-slide-up-down> element. (See demo/index.html for a full example.)

<style>
  .wobbly-accordeon {
    transition-timing-function: cubic-bezier(0.195, 1.650, 0.435, -0.600);
  }
</style>

<vue-slide-up-down class="wobbly-accordeon">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.
</vue-slide-up-down>

GitHub