Author: | bilalshareef |
---|---|
Views Total: | 25 views |
Official Page: | Go to website |
Last Update: | November 21, 2022 |
License: | MIT |
Preview:

Description:
Animate Display Property is a small JavaScript plugin that allows you to apply CSS3 animations on a specific element.
Animations included:
- Fade
- Slide: Slide Left, Slide Right, Slide Up, Slide Down
- Zoom: Zoom In, Zoom Out
- Rotate: Rotate Left, Rotate Right
- Flip: Flip Up, Flip Down, Flip Right, Flip Left
How to use it:
Include the JavaScript ‘adp.js’ and stylesheet ‘adp.css’ on the web page.
<link rel="stylesheet" href="css/adp.min.css"> <script src="js/adp.min.js"></script>
Apply a CSS3 based Show animation of your choice to your element.
var el = document.querySelector('.el'); ADP.show(el, 'fade');
Apply a CSS3 based Hide animation of your choice to your element.
var el = document.querySelector('.el'); ADP.hide(el, 'fade');
Toggle the animation.
var el = document.querySelector('.el'); ADP.toggle(el, 'fade');
Execute a callback function when the animation is played.
var el = document.querySelector('.el'); ADP.toggle(el, 'fade', , function(state) { console.log('Callback fired with ' + state); }););
Changelog:
v2.0.1 (11/21/2022)
- Fixed NPM audit issues.
- Changed license from GPLv3 to MIT.
v2.0.0 (08/31/2021)
- Added logic to cancel currently running animation if show is invoked when hide is being performed or vice versa.
- In callbacks, added state parameter which represents what happened to the element when show/hide was called.