Press "Enter" to skip to content

jQuery’s slideUp/slideDown Transition For Vue.js

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.