Vue Slide Up Down Transition Component

3.0.0 · active · verified Sun Apr 19

Vue Slide Up Down provides a Vue component for animating height transitions, mimicking the `slideUp` and `slideDown` effects found in jQuery. The current stable version is 3.0.0, which offers full compatibility with Vue 3. While there isn't a strict release cadence, updates are primarily driven by compatibility with major Vue versions and community contributions. Key differentiators include its simple, declarative API via the `active` prop, support for custom durations, and control over the wrapper HTML tag and the `hidden` attribute. It also emits detailed events for animation lifecycle stages, allowing for fine-grained control and integration into complex UIs. The library focuses on providing a robust and accessible solution for vertical content transitions within Vue applications.

Common errors

```
TypeError: vue_slide_up_down_1.default is not a constructor
```
cause Attempting to use `require()` for an ESM-only package or incorrect import syntax.

fix Change `const SlideUpDown = require('vue-slide-up-down');` to `import SlideUpDown from 'vue-slide-up-down';` and ensure your build environment supports ESM.
```
Failed to resolve component: slide-up-down
```
cause The component was not registered globally or locally within the Vue application.

fix Ensure `app.component('slide-up-down', SlideUpDown)` is called after `createApp()` and before `app.mount()`, or import and register it locally within your component's `components` option.
```
The 'active' prop is required but its value is undefined.
```
cause The `active` prop was either not provided or was provided with an `undefined` value.

fix Always bind a boolean value to the `active` prop, e.g., `:active="someBooleanData"`. This prop is mandatory for the component's functionality.

Warnings

breaking Version 3.0.0 dropped support for Vue 2. Applications using Vue 2 must remain on `vue-slide-up-down@2`.
Fix: For Vue 2 projects, install `npm i vue-slide-up-down@2`. For Vue 3 projects, upgrade to `npm i vue-slide-up-down@3`.
breaking Version 3.0.0 switched to ESM-only builds, removing the `microbundle` step. This means CommonJS `require()` is no longer supported.
Fix: Ensure your project uses an environment that supports ESM imports (e.g., Vite, webpack with appropriate configuration). Update all `require()` statements to `import` statements.
breaking In v2.0.0, the `hidden` attribute was added to the wrapper element when `active` is false. This might affect styling or JavaScript that relies on the absence of this attribute.
Fix: Review CSS selectors and JavaScript logic that targets the `slide-up-down` component. If this behavior is undesired in v3.x, use the `use-hidden` prop.
gotcha Setting the `use-hidden` prop to `false` can create significant accessibility issues, as focusable elements within the visually hidden component may still be accessible via keyboard navigation.
Fix: Only set `use-hidden="false"` if absolutely necessary for specific layout requirements (e.g., `min-height` transitions). Always test thoroughly with keyboard navigation and screen readers to ensure an accessible user experience.
gotcha To apply a custom `transition-timing-function`, it must be specified via CSS on the `slide-up-down` component itself, not as a prop.
Fix: Add a class to your `<slide-up-down>` component and define the `transition-timing-function` in your CSS, e.g., `.my-slide-transition { transition-timing-function: cubic-bezier(0.195, 1.65, 0.435, -0.6); }`

Install

npm install vue-slide-up-down npm
yarn add vue-slide-up-down yarn
pnpm add vue-slide-up-down pnpm

Imports

SlideUpDown
wrong:
```
const SlideUpDown = require('vue-slide-up-down')
```
correct:
```
import SlideUpDown from 'vue-slide-up-down'
```
Since v3.0.0, the package is ESM-only. CommonJS `require` is not supported. `SlideUpDown` is a default export.

App.component

wrong:

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

correct:

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

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

For global registration in Vue 3, use `app.component()` after creating the application instance. Direct `Vue.component` is a Vue 2 pattern.

:active
wrong:
```
<slide-up-down active="true"></slide-up-down>
```
correct:
```
<slide-up-down :active="myBoolean"></slide-up-down>
```
The `active` prop expects a boolean value. Use `v-bind:` or `:` for binding JavaScript expressions. Passing a string "true" will be truthy, but it's not the correct type binding.

Quickstart

This quickstart demonstrates how to import and globally register `SlideUpDown` in a Vue 3 application. It shows a basic toggle button that controls the visibility of a content block using the component's `active` prop, including dynamic content and an input field to demonstrate accessibility.

import { createApp, ref } from 'vue';
import SlideUpDown from 'vue-slide-up-down';

const app = createApp({
  template: `
    <div>
      <button @click="toggleActive">Toggle Content</button>
      <slide-up-down :active="isActive" :duration="800" class="my-slide-transition">
        <div v-if="isActive" style="padding: 15px; border: 1px solid #eee; background-color: #f9f9f9;">
          <h2>Animated Content</h2>
          <p>This content slides up and down. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, minima?</p>
          <input type="text" placeholder="Interactive element">
        </div>
      </slide-up-down>
    </div>
  `,
  setup() {
    const isActive = ref(false);
    const toggleActive = () => {
      isActive.value = !isActive.value;
    };
    return { isActive, toggleActive };
  }
});

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

view raw JSON →