2019-10-07 19:57:25 +00:00
|
|
|
/**
|
|
|
|
* Used in the function below to store references of clean-up functions.
|
|
|
|
* Used to ensure only one transitionend function exists at any time.
|
|
|
|
* @type {WeakMap<object, any>}
|
|
|
|
*/
|
|
|
|
const animateStylesCleanupMap = new WeakMap();
|
|
|
|
|
2023-04-19 14:20:04 +00:00
|
|
|
/**
|
|
|
|
* Animate the css styles of an element using FLIP animation techniques.
|
|
|
|
* Styles must be an object where the keys are style properties, camelcase, and the values
|
|
|
|
* are an array of two items in the format [initialValue, finalValue]
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {Object} styles
|
|
|
|
* @param {Number} animTime
|
|
|
|
* @param {Function} onComplete
|
|
|
|
*/
|
|
|
|
function animateStyles(element, styles, animTime = 400, onComplete = null) {
|
|
|
|
const styleNames = Object.keys(styles);
|
|
|
|
for (const style of styleNames) {
|
|
|
|
element.style[style] = styles[style][0];
|
|
|
|
}
|
|
|
|
|
|
|
|
const cleanup = () => {
|
|
|
|
for (const style of styleNames) {
|
|
|
|
element.style[style] = null;
|
|
|
|
}
|
|
|
|
element.style.transition = null;
|
|
|
|
element.removeEventListener('transitionend', cleanup);
|
|
|
|
animateStylesCleanupMap.delete(element);
|
|
|
|
if (onComplete) onComplete();
|
|
|
|
};
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
element.style.transition = `all ease-in-out ${animTime}ms`;
|
|
|
|
for (const style of styleNames) {
|
|
|
|
element.style[style] = styles[style][1];
|
|
|
|
}
|
|
|
|
|
|
|
|
element.addEventListener('transitionend', cleanup);
|
|
|
|
animateStylesCleanupMap.set(element, cleanup);
|
|
|
|
}, 15);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Run the active cleanup action for the given element.
|
|
|
|
* @param {Element} element
|
|
|
|
*/
|
|
|
|
function cleanupExistingElementAnimation(element) {
|
|
|
|
if (animateStylesCleanupMap.has(element)) {
|
|
|
|
const oldCleanup = animateStylesCleanupMap.get(element);
|
|
|
|
oldCleanup();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-07 16:54:34 +00:00
|
|
|
/**
|
|
|
|
* Fade in the given element.
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {Number} animTime
|
|
|
|
* @param {Function|null} onComplete
|
|
|
|
*/
|
|
|
|
export function fadeIn(element, animTime = 400, onComplete = null) {
|
|
|
|
cleanupExistingElementAnimation(element);
|
|
|
|
element.style.display = 'block';
|
|
|
|
animateStyles(element, {
|
2023-04-18 21:20:02 +00:00
|
|
|
opacity: ['0', '1'],
|
2019-12-07 16:54:34 +00:00
|
|
|
}, animTime, () => {
|
|
|
|
if (onComplete) onComplete();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-07-06 14:08:26 +00:00
|
|
|
/**
|
|
|
|
* Fade out the given element.
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {Number} animTime
|
|
|
|
* @param {Function|null} onComplete
|
|
|
|
*/
|
|
|
|
export function fadeOut(element, animTime = 400, onComplete = null) {
|
2019-10-07 19:57:25 +00:00
|
|
|
cleanupExistingElementAnimation(element);
|
2019-07-06 14:08:26 +00:00
|
|
|
animateStyles(element, {
|
2023-04-18 21:20:02 +00:00
|
|
|
opacity: ['1', '0'],
|
2019-07-06 14:08:26 +00:00
|
|
|
}, animTime, () => {
|
|
|
|
element.style.display = 'none';
|
|
|
|
if (onComplete) onComplete();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-06-07 14:51:01 +00:00
|
|
|
/**
|
|
|
|
* Hide the element by sliding the contents upwards.
|
|
|
|
* @param {Element} element
|
|
|
|
* @param {Number} animTime
|
|
|
|
*/
|
|
|
|
export function slideUp(element, animTime = 400) {
|
2019-10-07 19:57:25 +00:00
|
|
|
cleanupExistingElementAnimation(element);
|
2019-06-07 14:51:01 +00:00
|
|
|
const currentHeight = element.getBoundingClientRect().height;
|
|
|
|
const computedStyles = getComputedStyle(element);
|
|
|
|
const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
|
|
|
|
const currentPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
|
|
|
const animStyles = {
|
2022-05-18 12:18:21 +00:00
|
|
|
maxHeight: [`${currentHeight}px`, '0px'],
|
2019-06-07 14:51:01 +00:00
|
|
|
overflow: ['hidden', 'hidden'],
|
|
|
|
paddingTop: [currentPaddingTop, '0px'],
|
|
|
|
paddingBottom: [currentPaddingBottom, '0px'],
|
|
|
|
};
|
|
|
|
|
|
|
|
animateStyles(element, animStyles, animTime, () => {
|
|
|
|
element.style.display = 'none';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Show the given element by expanding the contents.
|
|
|
|
* @param {Element} element - Element to animate
|
|
|
|
* @param {Number} animTime - Animation time in ms
|
|
|
|
*/
|
|
|
|
export function slideDown(element, animTime = 400) {
|
2019-10-07 19:57:25 +00:00
|
|
|
cleanupExistingElementAnimation(element);
|
2019-06-07 14:51:01 +00:00
|
|
|
element.style.display = 'block';
|
|
|
|
const targetHeight = element.getBoundingClientRect().height;
|
|
|
|
const computedStyles = getComputedStyle(element);
|
|
|
|
const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
|
|
|
|
const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
|
|
|
const animStyles = {
|
2022-05-18 12:18:21 +00:00
|
|
|
maxHeight: ['0px', `${targetHeight}px`],
|
2019-06-07 14:51:01 +00:00
|
|
|
overflow: ['hidden', 'hidden'],
|
|
|
|
paddingTop: ['0px', targetPaddingTop],
|
|
|
|
paddingBottom: ['0px', targetPaddingBottom],
|
|
|
|
};
|
|
|
|
|
|
|
|
animateStyles(element, animStyles, animTime);
|
|
|
|
}
|
|
|
|
|
2022-05-14 12:32:25 +00:00
|
|
|
/**
|
|
|
|
* Transition the height of the given element between two states.
|
|
|
|
* Call with first state, and you'll receive a function in return.
|
|
|
|
* Call the returned function in the second state to animate between those two states.
|
|
|
|
* If animating to/from 0-height use the slide-up/slide down as easier alternatives.
|
|
|
|
* @param {Element} element - Element to animate
|
|
|
|
* @param {Number} animTime - Animation time in ms
|
|
|
|
* @returns {function} - Function to run in second state to trigger animation.
|
|
|
|
*/
|
|
|
|
export function transitionHeight(element, animTime = 400) {
|
|
|
|
const startHeight = element.getBoundingClientRect().height;
|
|
|
|
const initialComputedStyles = getComputedStyle(element);
|
|
|
|
const startPaddingTop = initialComputedStyles.getPropertyValue('padding-top');
|
|
|
|
const startPaddingBottom = initialComputedStyles.getPropertyValue('padding-bottom');
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
cleanupExistingElementAnimation(element);
|
|
|
|
const targetHeight = element.getBoundingClientRect().height;
|
|
|
|
const computedStyles = getComputedStyle(element);
|
|
|
|
const targetPaddingTop = computedStyles.getPropertyValue('padding-top');
|
|
|
|
const targetPaddingBottom = computedStyles.getPropertyValue('padding-bottom');
|
|
|
|
const animStyles = {
|
|
|
|
height: [`${startHeight}px`, `${targetHeight}px`],
|
|
|
|
overflow: ['hidden', 'hidden'],
|
|
|
|
paddingTop: [startPaddingTop, targetPaddingTop],
|
|
|
|
paddingBottom: [startPaddingBottom, targetPaddingBottom],
|
|
|
|
};
|
|
|
|
|
|
|
|
animateStyles(element, animStyles, animTime);
|
|
|
|
};
|
|
|
|
}
|