From 3a3baddad1c801d77dc398d2c6980f3c14f4a47c Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 30 Oct 2021 22:11:00 +0200 Subject: chore: move htdocs to repo root --- src/js/utilities/animations.js | 45 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/js/utilities/animations.js (limited to 'src/js/utilities/animations.js') diff --git a/src/js/utilities/animations.js b/src/js/utilities/animations.js new file mode 100644 index 0000000..9a30685 --- /dev/null +++ b/src/js/utilities/animations.js @@ -0,0 +1,45 @@ +/** + * Change the element classes to hide it with a slide out left animation. + * @param {HTMLElement} el - The HTMLElement to hide. + */ +function hideToLeft(el) { + el?.classList.remove('slide-in--left'); + el?.classList.add('slide-out--left'); + setTimeout(() => { + el?.classList.add('hide'); + }, 800); +} + +/** + * Change the element classes to show it with a slide in left animation. + * @param {HTMLElement} el - The HTMLElement to show. + */ +function showFromLeft(el) { + el?.classList.remove('slide-out--left'); + el?.classList.remove('hide'); + el?.classList.add('slide-in--left'); +} + +/** + * Change the element classes to hide it with a slide out bottom animation. + * @param {HTMLElement} el - The HTMLElement to hide. + */ +function hideToBottom(el) { + el?.classList.remove('slide-in--up'); + el?.classList.add('slide-out--bottom'); + setTimeout(() => { + el?.classList.add('hide'); + }, 800); +} + +/** + * Change the element classes to show it with a slide in up animation. + * @param {HTMLElement} el - The HTMLElement to show. + */ +function showFromBottom(el) { + el?.classList.remove('slide-out--bottom'); + el?.classList.remove('hide'); + el?.classList.add('slide-in--up'); +} + +export { hideToLeft, showFromLeft, hideToBottom, showFromBottom }; -- cgit v1.2.3