vue-slide-up-down

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

Demo: https://codepen.io/danieldiekmeier/pen/YapGWq

Installation

``sh
npm i vue-slide-up-down
`

`js
import { createApp } from 'vue'
import SlideUpDown from 'vue-slide-up-down'

const app = createApp({ ... })
app.component('slide-up-down', SlideUpDown)
`

> [!NOTE]
> Version 3 of this package is only compatible with Vue 3. If you're still on Vue 2, install the previous version with npm i vue-slide-up-down@2

Usage

`html



`

The component takes four props:

- active (Boolean, required): Whether to show the component (true) or not (false)
- duration (Number, optional): How long the animation is supposed to be, in milliseconds. Defaults to 500.
- tag (String, optional): Which HTML tag to use for the wrapper element. Defaults to div.
- use-hidden (Boolean, optional): Whether to apply the hidden attribute to the element when closed. Defaults to true. This hides the component from the screen and from assistive devices. The internal elements of the component are completely invisible, and can't be focused (by a keyboard or assistive device). (This is probably what you want!)

If you really need to, you can set this property to false to _not_ use the hidden attribute. For example if you want to have a min-height on your component and not actually transition to a height of 0.

⚠️ Be aware that this can create accessibility issues, specifically for users with a keyboard or screen reader. Even though the component may _appear_ hidden, focusable elements within the component are still able to be accessed through keyboard navigation.

The component emits four events:

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

`html

`

$3

If you want to use a different timing function, add some CSS for your element. (See demo/index.html for a full example.)

`html



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit
ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.

``