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.

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

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

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

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

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

Official Website(bilalshareef): Click Here

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