64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
|
// Utilities
|
||
|
|
import { camelize } from 'vue';
|
||
|
|
export default function () {
|
||
|
|
let expandedParentClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||
|
|
let x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||
|
|
const sizeProperty = x ? 'width' : 'height';
|
||
|
|
const offsetProperty = camelize(`offset-${sizeProperty}`);
|
||
|
|
return {
|
||
|
|
onBeforeEnter(el) {
|
||
|
|
el._parent = el.parentNode;
|
||
|
|
el._initialStyle = {
|
||
|
|
transition: el.style.transition,
|
||
|
|
overflow: el.style.overflow,
|
||
|
|
[sizeProperty]: el.style[sizeProperty]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onEnter(el) {
|
||
|
|
const initialStyle = el._initialStyle;
|
||
|
|
el.style.setProperty('transition', 'none', 'important');
|
||
|
|
// Hide overflow to account for collapsed margins in the calculated height
|
||
|
|
el.style.overflow = 'hidden';
|
||
|
|
const offset = `${el[offsetProperty]}px`;
|
||
|
|
el.style[sizeProperty] = '0';
|
||
|
|
void el.offsetHeight; // force reflow
|
||
|
|
|
||
|
|
el.style.transition = initialStyle.transition;
|
||
|
|
if (expandedParentClass && el._parent) {
|
||
|
|
el._parent.classList.add(expandedParentClass);
|
||
|
|
}
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
el.style[sizeProperty] = offset;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
onAfterEnter: resetStyles,
|
||
|
|
onEnterCancelled: resetStyles,
|
||
|
|
onLeave(el) {
|
||
|
|
el._initialStyle = {
|
||
|
|
transition: '',
|
||
|
|
overflow: el.style.overflow,
|
||
|
|
[sizeProperty]: el.style[sizeProperty]
|
||
|
|
};
|
||
|
|
el.style.overflow = 'hidden';
|
||
|
|
el.style[sizeProperty] = `${el[offsetProperty]}px`;
|
||
|
|
void el.offsetHeight; // force reflow
|
||
|
|
|
||
|
|
requestAnimationFrame(() => el.style[sizeProperty] = '0');
|
||
|
|
},
|
||
|
|
onAfterLeave,
|
||
|
|
onLeaveCancelled: onAfterLeave
|
||
|
|
};
|
||
|
|
function onAfterLeave(el) {
|
||
|
|
if (expandedParentClass && el._parent) {
|
||
|
|
el._parent.classList.remove(expandedParentClass);
|
||
|
|
}
|
||
|
|
resetStyles(el);
|
||
|
|
}
|
||
|
|
function resetStyles(el) {
|
||
|
|
const size = el._initialStyle[sizeProperty];
|
||
|
|
el.style.overflow = el._initialStyle.overflow;
|
||
|
|
if (size != null) el.style[sizeProperty] = size;
|
||
|
|
delete el._initialStyle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//# sourceMappingURL=expand-transition.mjs.map
|