boilerplate.js
Version:
Development Tools
34 lines (25 loc) • 974 B
JavaScript
/* How To Use
<button>Demo</button>
document.querySelector('button').slideDown(() => {
console.log('optional callback');
}, 2);
// Animation duration = 2 Seconds -- Default = 0.2 Seconds
*/
Element.prototype.slideDown = function(cb, speed) {
let element = this;
element.style.cssText = 'transition: all 0.2s ease 0s; transform-origin: center top; transform: scaleY(0)';
if (!cb) cb = null;
speed = typeof cb !== 'function' ? cb : speed;
if (!speed) speed = 200;
speed = parseInt(speed) >= 100 ? speed/1000 : speed;
element.style.transition = `all ${speed}s`;
element.style.transformOrigin = 'top center';
element.classList.remove('hidden');
setTimeout(() => {
element.style.transform = 'scaleY(1)';
}, 50);
setTimeout(() => {
element.classList.remove('hidden');
if(typeof cb === 'function') cb(element);
}, speed * 1000);
};