A Small JavaScript Plugin for Adding Transition Effects to a CSS Display Property

Animate Display is a small JavaScript plugin for adding transition effects to a CSS display property. This plugin uses CSS3 animations to achieve transition effects when an element’s display property changes.

As you all know, CSS3 display property transitions don’t work and we switch between display: block / inline / flex and display: none to show and hide elements. I have found it difficult in my projects to show and hide elements with transitional effects. So I wrote this little plugin to hide and show items with effects.

The callback function takes an argument called state. The state represents what happened to the element when show/hide was called. The different states are as follows.

  • Full Animation – The intended action (show/hide) has been completed with the appropriate animation.
  • Already visible – This state will be returned when the element is already visible and the view of the element is called.
  • show-already-in-progress – This state will be returned when the view animation is already in progress and the item’s show method is called.
  • Already hidden – This state will be returned when the element is already hidden and the element’s hide method is called.
  • Hide – Already in Progress – This state will be returned when the stash movement is already in progress and the object’s Hide method is called.
  • Cancel Animation – This state will return when you cancel the animation. Cancel animation occurs when an animation is in progress to show/hide the element and the opposite action is performed on the element. Example – The hide method is called for an element and when the hide animation is in progress, the view for the same element is called. In this case, the animation will be shown halfway, and the masking method will be called with the animation shown. Once you unhide the animation, the animation will be displayed on the element.

How to make use of it:

Include the JavaScript ‘adp.js’ and stylesheet ‘adp.css’ on the net web page.

<link rel="stylesheet" href="css/adp.min.css">
<script src="js/adp.min.js"></script>

Apply a CSS3 primarily based Show animation of your option to your component.

var el = document.querySelector('.el');
ADP.show(el, 'fade');

Apply a CSS3 primarily based Hide animation of your option to your component.

var el = document.querySelector('.el');
ADP.hide(el, 'fade');

Toggle the animation.

var el = document.querySelector('.el');
ADP.toggle(el, 'fade');

Execute a callback operate when the animation is performed.

var el = document.querySelector('.el');
ADP.toggle(el, 'fade', , function(state) {
  console.log('Callback fired with ' + state);

Small JS Library For CSS3 Animations, Animate Display Property Plugin/Github

See Demo And Download

Official Website(bilalshareef): Click Here

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

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…