Author: | BrentonCozby |
---|---|
Views Total: | 4,635 views |
Official Page: | Go to website |
Last Update: | April 25, 2021 |
License: | MIT |
Preview:

Description:
dom-slider is a pure JavaScript slide animation library for animated slideUp and slideDown of elements within the document.
A great alternative to jQuery’s slideToggle()
, slideDown()
, and slideUp()
methods.
Can be used to toggle anything (like dropdown, accordion, popover, etc) from hide to show and vice versa.
See Also:
- ES6 slideUp & slideDown Library
- Show/Hide Matched Elements With Smooth Slide Motion – slideToggle
- Smooth Slide Toggle In Vanilla JavaScript
How to use it:
1. To get started, load the minified version of the dom-slider library in the document.
<script src="./dist/dom-slider.js"></script>
2. Slide up/down or toggle an element as follows:
const el = document.querySelector('.myElement')
// toggle slideToggle({ element: el }) // slide up slideUp({ element: el }) // slide down slideDown({ element: el })
3. Specify the animation speed. Default: 300.
slideDown({ element: content, slideSpeed: 800 })
4. Specify the animation delay. Default: 20
slideDown({ element: content, delay: 200 })
5. Determine the direction of the animation: ‘down’ or ‘up’.
slideDown({ element: content, slideDirection: 'up' })
6. Apply a custom easing function.
slideDown({ element: content, easing: 'cubic-bezier(0.25, 0.1, 0.44, 1.4)' })
7. Define the value of CSS display propery when the element is visible. Default: ‘block’.
slideDown({ element: content, visibleDisplayValue: 'inline' })
Changelog:
v2.2.0 (04/25/2021)
- Allow dynamic heights by removing cachedStyles