Slide Animator is a JavaScript module that helps with animating the sliding of HTML elements.
npm install slide-animatorThis module provides three functions for creating sliding animations with CSS transitions: slideUp, slideDown, and slideToggle.
To install Slide Animator, run the following command:
``
// NPM
npm install slide-animator
// Yarn
yarn add slide-animator
// PNPM
pnpm add slide-animator
`
`
import { slideUp, slideDown, slideToggle } from 'slide-animator';
const element = document.querySelector('#my-element');
const time = 200; // time in milliseconds
slideUp(element, time);
slideDown(element, time);
slideToggle(element, time);
`
- The element to slide up. This must be an HTMLElement.
2. duration - The duration of the slide transition in milliseconds. This defaults to 300ms if not specified.slideDown(target, duration, displayProp)
Slides an element down by setting its height and spacings to their original values over a specified duration.
$3
1. target - The element to slide down. This must be an HTMLElement.
2. duration - The duration of the slide transition in milliseconds. This defaults to 300ms if not specified.
3. displayProp - The CSS display property to use when sliding down the element. This defaults to "block" if not specified.slideToggle(target, duration, displayProp)
Toggles the visibility of an element by sliding it up or down.
$3
1. target - The element to slide up or down. This must be an HTMLElement.
2. duration - The duration of the slide transition in milliseconds. This defaults to 300ms if not specified.
3. displayProp` - The CSS display property to use when sliding down the element. This defaults to "block" if not specified.