Slide Up/ Down Toggle Element With CSS3 Transitions | slide-element

Slide Element is a bunch of promise-based functions reminiscent of jQuery to help slide and show elements. slide-element is a tiny JavaScript library to toggle element visibility with CSS3-based sliding up/down transitions.

Using JavaScript to move an element open and closed has traditionally not been a simple task, especially if it contains dynamically sized content. You could use something like jQuery’s slideToggle(), but that path requires you to take in a lot more code than necessary. Another option is to use CSS to change the max-height value of an element, but this approach is full of arbitrariness and hard to do well when you’re not sure how much content you’ll be moving.

This library gets the job done using the Web Animations API and doesn’t require fixed-height elements. Instead, the heights of the elements are calculated based on their contents, and then the appropriate values ​​are applied to start a smooth native transition. The animations themselves are powered by the same mechanics used in CSS transitions, which makes it one of the best ways to pull it off in terms of performance.

It’s small, smooth, and focused on doing one job well: sliding things open and closed.

Must Read – Slide and Push Menu Transitions With Vanilla Javascript | slidemenu

How to make use of it:

1. Install the slide-element with NPM.

# NPM
$ npm i slide-element --save

2. Import the elements into your undertaking.

// 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 a component to be shown and hidden by the slide element.

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

5. Hide the component on the web page load.

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

6. Enable a trigger button to toggle the component 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'));
SlideElement.toggle(document.getElementById("example")).then(() => {
// do something
});

7. Config the sliding animation.

SlideElement.toggle(document.getElementById('example'),{
  duration: .25,
  timingFunction: 'ease'
});

Must Read – jQuery Plugin for Off On Canvas Animation Panels CSS3

Customizing the Animation

By default, slide-element uses the following transition property values:

PropertyValue
duration (in milliseconds)250
easing (choose one)ease

Read More – 

A jQuery Plugin That Gives Your Slide Shows Some Flash-Like Transitions | CJ Flashy Slideshow
jQuery Plugin That Combines Accordion Slider Functionality


See Demo And Download

Official Website(alexmacarthur): Click Here

This superior jQuery/javascript plugin is developed by alexmacarthur. For extra Advanced Usage, please go to the official website.

Share