Toggle Element With Smooth CSS3 Transitions – slide-element

Category: Animation , Javascript | October 1, 2020
Author:alexmacarthur
Views Total:24 views
Official Page:Go to website
Last Update:October 1, 2020
License:MIT

Preview:

Toggle Element With Smooth CSS3 Transitions – slide-element

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,
  timingFunction: 'ease'
});

Changelog:

v0.1.1 (10/01/2020)

  • Rewrite in TypeScript.

You Might Be Interested In:


Leave a Reply