Author: | alexmacarthur |
---|---|
Views Total: | 258 views |
Official Page: | Go to website |
Last Update: | December 11, 2022 |
License: | MIT |
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.