Created
March 17, 2026 10:25
-
-
Save chrishow/aedc54a35ce3c927e9eff5a2662d9a42 to your computer and use it in GitHub Desktop.
jQuery-like slideUp and slideDown for vanilla ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * jQuery-like animation utilities for vanilla JavaScript | |
| * Provides smooth slide animations with callback support | |
| */ | |
| /** | |
| * Slides an element down (expands from 0 height to full height) | |
| * @param element The HTMLElement to animate | |
| * @param duration Animation duration in milliseconds | |
| * @param callback Optional callback function to execute after animation completes | |
| */ | |
| export function slideDown(element: HTMLElement, duration: number, callback?: () => void): void { | |
| element.style.removeProperty('display'); | |
| let display = window.getComputedStyle(element).display; | |
| if (display === 'none') display = 'block'; | |
| element.style.display = display; | |
| const height = element.offsetHeight; | |
| element.style.overflow = 'hidden'; | |
| element.style.height = '0'; | |
| element.style.paddingTop = '0'; | |
| element.style.paddingBottom = '0'; | |
| element.style.marginTop = '0'; | |
| element.style.marginBottom = '0'; | |
| element.offsetHeight; // Force reflow | |
| element.style.transition = `height ${duration}ms ease, padding ${duration}ms ease, margin ${duration}ms ease`; | |
| element.style.height = height + 'px'; | |
| element.style.removeProperty('padding-top'); | |
| element.style.removeProperty('padding-bottom'); | |
| element.style.removeProperty('margin-top'); | |
| element.style.removeProperty('margin-bottom'); | |
| setTimeout(() => { | |
| element.style.removeProperty('height'); | |
| element.style.removeProperty('overflow'); | |
| element.style.removeProperty('transition'); | |
| if (callback) callback.call(element); | |
| }, duration); | |
| } | |
| /** | |
| * Slides an element up (collapses from full height to 0 height) | |
| * @param element The HTMLElement to animate | |
| * @param duration Animation duration in milliseconds | |
| * @param callback Optional callback function to execute after animation completes | |
| */ | |
| export function slideUp(element: HTMLElement, duration: number, callback?: () => void): void { | |
| element.style.height = element.offsetHeight + 'px'; | |
| element.style.overflow = 'hidden'; | |
| element.offsetHeight; // Force reflow | |
| element.style.transition = `height ${duration}ms ease, padding ${duration}ms ease, margin ${duration}ms ease`; | |
| element.style.height = '0'; | |
| element.style.paddingTop = '0'; | |
| element.style.paddingBottom = '0'; | |
| element.style.marginTop = '0'; | |
| element.style.marginBottom = '0'; | |
| setTimeout(() => { | |
| element.style.display = 'none'; | |
| element.style.removeProperty('height'); | |
| element.style.removeProperty('padding-top'); | |
| element.style.removeProperty('padding-bottom'); | |
| element.style.removeProperty('margin-top'); | |
| element.style.removeProperty('margin-bottom'); | |
| element.style.removeProperty('overflow'); | |
| element.style.removeProperty('transition'); | |
| if (callback) callback.call(element); | |
| }, duration); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment