THEMETRIAL

Toggle Element With Smooth CSS3 Transitions – slide-element

Author:alexmacarthur
Views Total:1 view
Official Page:Go to website
Last Update:April 29, 2021
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="https://www.cssscript.com/./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:

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)


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.