Vue3 Slide Up Down

Installation

For the NPM users out there:

npm i vue3-slide-up-down

or Yarn users:

yarn add vue3-slide-up-down

Usage

There’s no installation required, so just import the component where you want to use it:

1<template>
2	<Vue3SlideUpDown v-model="show">
3		Hello Foobar
4	</Vue3SlideUpDown>
5</template>
6
7<script setup>
8import { ref } from "vue";
9import { Vue3SlideUpDown } from "vue3-slide-up-down";
10
11const show = ref(true);
12</script>

Component Props

Prop	Type	Default	Description
modelValue	Boolean	false	Whether the content inside is visible or not
duration	Number	500	The time in ms that the open/close animation lasts for
timingFunction	String	ease-in-out	The CSS ease function that will be used for both opening and closing transitions
timingFunctionEnter	String	null	The CSS ease function that will be used when content enters the DOM. When set, this setting overrides ‘timingFunction’
timingFunctionLeave	String	null	The CSS ease function that will be used when content leaves the DOM. When set, this setting overrides ‘timingFunction’
opacityOpen	Number	1	The opacity of the element on the last keyframe of the open/enter transition
opacityClosed	Number	0	The opacity of the element on the first keyframe of the close/leave transition
tag	String	div	The HTML element to use for the wrapping container
eager	Boolean	false	Switches to v-show for rendering strategy, meaning contents are always in the DOM

Note: Any other attributes that you pass to the component will be passed through to the wrapper element. You should, however, avoid adding any paddings or margins to this element since they can cause unexpected results.

Events

Event Name	Parameters	Description
update:modelValue	($event) => {}	The v-model state of the component, should be either true or false
open-start	none	Emitted when the open/enter animation begins
open-end	none	Emitted when the open/enter animation finishes
close-start	none	Emitted when the close/leave animation begins
close-end	none	Emitted when the close/leave animation finishes

Migration from v1

A few changes were made to bring the package into line with current best practices and to eliminate some complexity from the component.

(1) The component is no longer the default export and instead a named export. Change your imports like so:

// version 1
import SlideUpDown from 'vue3-slide-up-down';

// version 2
import { Vue3SlideUpDown } from "vue3-slide-up-down";

The responsive prop and functionality have been dropped from this version since it added unnecessary overhead for a feature that wasn’t used in 99.9% of cases. Element height is no longer tracked once the animation is complete and any content changes will be handled by the browser normally.