vue-slide-up-down is a sliding effect component of Vue.js applications, similar to the jQuery .slideDown() and .slideUp() functions.

vue slide up down, vue transition, vue 3 slide up down transition, vue leave transition not working, vue sliding panel, vue js transition not working, slide down animation css

How to make use of it:

Install & Download:

# NPM
$ npm install vue-slide-up-down --save

1. Usage with Webpack or other module bundlers:

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

Vue.component('slide-up-down', SlideUpDown)

2. Or use the UMD build directly in your browser (the component is provided as window.VueSlideUpDown).

<script
  type="text/javascript"
  src="node_modules/vuejs/dist/vue.min.js"
></script>
<script
  type="text/javascript"
  src="node_modules/vue-slide-up-down/dist/vue-slide-up-down.umd.js"
></script>
<script type="text/javascript">
  Vue.component('slide-up-down', VueSlideUpDown)
</script>

The component emits four Vue events:

• open-start
• open-end
• close-start
• close-end

slide up/down effects Plugin/Github/Codepen, transitions vuejs

See Demo And Download

Official Website(danieldiekmeier): Click Here

This superior jQuery/javascript plugin is developed by danieldiekmeier. For extra advanced usage, please go to the official website.