vue3-slide-up-down

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

Forked from Daniel Diekmeier's vue-slide-up-down project.

Demo

Coming soon

Installation

 npm i vue3-slide-up-down

Usage with Webpack or other module bundlers:

 import SlideUpDown from 'vue3-slide-up-down'

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

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

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

Usage

The component takes five props:

name	type	required	description	default
v-model	boolean	yes	Whether to show the component or not	N/A
duration	number	no	How long the animation will be in ms	500
timingFunction	string	no	The CSS transition-timing-function property	"ease-in-out"
tag	string	no	The HTML tag to use for the wrapper element	"div"
responsive	boolean	no	Animate height when contents are changed	false

 <div class="MyContent">
  <h1>Always show this</h1>

  <slide-up-down v-model="active" :duration="1000">
    Only show this if "active” is true
  </slide-up-down>
</div>

The component emits five Vue events:

• open-start
• open-end
• close-start
• close-end
• layout-shift

 <slide-up-down @close-end="() => console.log('done closing!')" />