Toggle Element With Smooth CSS3 Transitions

Toggle Element With Smooth CSS3 Transitions

slide-element A Promise-based, jQuery-reminiscent collection of functions to help hide and show elements in a sliding fashion.

slide-element

A Promise-based, jQuery-reminiscent collection of functions to help hide and show elements in a sliding fashion.

Under the Hood

This library relies on CSS animations to perform the transitions, but doesn't require elements to have fixed heights. Instead, element heights are calculated based on their contents and padding (if applicable), and then the appropriate values are then applied to trigger a native transition. In all, slide-element comes in at under 1kb gzipped.

Installation

npm install slide-element

Setup

Make sure your target element is set to display: none, whether that's with a class or inline style.

Usage

Toggling Elements

Use the toggle function to slide an element open & closed based on its current state.

import { toggle } from "slide-element";

document.getElementById("button").addEventListener("click", (e) => {
  toggle(document.getElementById("box"));
});

Sliding Elements Down

Use the down function to slide an element open.

import { down } from "slide-element";

down(document.getElementById("boxToSlideOpen"));

Sliding Elements Up

Use the up function to slide an element closed, and then set its display property to none.

import { up } from "slide-element";

up(document.getElementById("boxToSlideClosed"));

Everything's a Promise

Each of the functions provided return promises, so you can easily wait to perform an action after an animation is complete. The resolved value will be a boolean indicating if the element has just been opened (true) or closed (false).

import { toggle } from "slide-element";

toggle(document.getElementById("someElement")).then((opened) => {
  console.log("toggling is done!");
});

Customizing the Animation

Each function accepts an object to control how the sliding animation executes. You can set your own duration and timingFunction values.

import { up } from "slide-element";

const anElement = document.getElementById("anElement");

up(anElement, { duration: 0.5, timingFunction: "linear" });

Options

Option Type Description Default
duration number The speed of the transition in seconds. .25
timingFunction string The CSS timing function used to define the style of transition. ease

Usage w/o a Bundler

If you'd like to use slide-element directly in the browser via CDN, simply load the code, and then reference the function you'd like to use on the global SlideElement object:

<script src="./dist/slide-element.min.js"></script>
<script>
  document.getElementById('someElement').addEventListener('click', (e) => {
    SlideElement.toggle(document.getElementById('someBox'));
});
</script>

API

toggle(node[, options]), up(node[, options]), down(node[, options]),

Param Type Description
node Node A single HTML node to be slid open or closed
options object Options to customize sliding animation.

Contributions

Go for it. Just send a PR.

Download Details:

Author: alexmacarthur

Demo: https://alexmacarthur.github.io/slide-element/

Source Code: https://github.com/alexmacarthur/slide-element

css css3 javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

CSS3 Clip-path Transform Effects on Scroll with Video Background | Html CSS Vanilla Javascript

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Responsive Flexible Accordion Gallery In JavaScript & CSS/CSS3

Responsive Flexible Accordion Gallery In JavaScript & CSS/CSS3 Responsive Flex Image Gallery

Map Custom Marker and Controls | JavaScript, CSS and API

How we can add a custom marker on google map using JavaScript & CSS? Solution: JavaScript Google Map Marker With CSS, Custom API Map Controls.