Toggle Element With Smooth CSS3 Transitions – slide-element

Preview:

Description:

slide-element is a super tiny JavaScript library to toggle the visibility of an element with CSS3 based smooth slide up/down transitions.

A great alternative to the jQuery slide & toggle methods that can be used to show/hide any element in a UI component like dropdown, accordion, tabs, and much more.

Also provides Promise support that enables you to do some cool stuff after the animation is finished.

How to use it:

1. Install the slide-element with NPM.

# NPM
$ npm i slide-element --save

2. Import the components into your project.

// toggle an element based on the current state
import { toggle } from "slide-element";
// slide up
import { up } from "slide-element";
// slide down
import { down } from "slide-element";

3. Or load the slide-element.min.js script from the dist folder.

<script src="./dist/slide-element.min.js"></script>

4. Create an element to be shown and hidden by the slide-element.

<div id="example">
  Any Thing Here
</div>

5. Hide the element on page load.

.example {
  display: none;
  background: blue;
}

6. Enable a trigger button to toggle the element with slide up/down animations.

<button id="trigger">Click Me</button>

document.getElementById('trigger').addEventListener('click', (e) => {
  SlideElement.toggle(document.getElementById('example'));
});

// slide up
SlideElement.up(document.getElementById('example'));
// slide down
SlideElement.down(document.getElementById('example'));

7. Perform an action after the animation is finished using the promise then method.

SlideElement.toggle(document.getElementById("example")).then(() => {
// do something
});

8. Config the sliding animation.

SlideElement.toggle(document.getElementById('example'),{
  duration: .25,
  easing: 'ease-in-out'
});

9. Set the CSS Display property of the slide element.

SlideElement.toggle(document.getElementById('example'),{
  display: "flex"
});

Changelog:

v2.3.1 (12/11/2022)

• Updated dependencies

v2.3.0 (06/29/2022)

• Make `overflow` Value Configurable

v2.2.6 (01/27/2022)

• Simplifies a couple of things that had to do with holding the state (open or closed) of an element.

v2.2.5 (01/24/2022)

• Ensure callback fires only after animation is finished.

v2.2.4 (12/12/2021)

• Fix incorrect aria-expanded implementation.

v2.2.3 (11/14/2021)

• Fix Overflow Issue in Safari

v2.2.2 (11/14/2021)

• allows for dynamic height values (useful in cases where items within the element are inserted, removed, or resized between animations).
• allows for elements to have their padding values animated

v2.2.1 (10/06/2021)

• Changes the library from using a Map() to store expanded height values, in favor of a WeakMap, for an ultra-small performance optimization.

v2.2.0 (07/14/2021)

• Set aria-expanded value after animation.

v2.1.0 (07/11/2021)

• Disable animation for those who prefer reduced motion.
• Addresses a bug that would occur when a user would rapidly trigger an animation without letting an in-progress one finish.

v2.0.1 (07/08/2021)

• Disable Overflow

v2.0.0 (07/08/2021)

• Move to Web Animations API

v1.1.0 (05/30/2021)

• Event handling was slimmed down a bit, cutting a few more bytes out of the package.
• A custom display value can now be passed, which will be applied when an element has been slid open.

v1.0.2 (04/29/2021)

• Clean up event listener handling.

v1.0.1 (04/29/2021)

• Prevent potential issues with multiple instances, slim down even further.

v0.2.1 (11/09/2020)

• Only set CSS properties when needed in order to guarantee smooth transitions.

v0.1.1 (10/01/2020)

• Rewrite in TypeScript.