73 lines
No EOL
2 KiB
JavaScript
73 lines
No EOL
2 KiB
JavaScript
import { upperFirst } from '../../util/helpers';
|
|
export default function (expandedParentClass = '', x = false) {
|
|
const sizeProperty = x ? 'width' : 'height';
|
|
const offsetProperty = `offset${upperFirst(sizeProperty)}`;
|
|
return {
|
|
beforeEnter(el) {
|
|
el._parent = el.parentNode;
|
|
el._initialStyle = {
|
|
transition: el.style.transition,
|
|
visibility: el.style.visibility,
|
|
overflow: el.style.overflow,
|
|
[sizeProperty]: el.style[sizeProperty]
|
|
};
|
|
},
|
|
|
|
enter(el) {
|
|
const initialStyle = el._initialStyle;
|
|
const offset = `${el[offsetProperty]}px`;
|
|
el.style.setProperty('transition', 'none', 'important');
|
|
el.style.visibility = 'hidden';
|
|
el.style.visibility = initialStyle.visibility;
|
|
el.style.overflow = 'hidden';
|
|
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;
|
|
});
|
|
},
|
|
|
|
afterEnter: resetStyles,
|
|
enterCancelled: resetStyles,
|
|
|
|
leave(el) {
|
|
el._initialStyle = {
|
|
transition: '',
|
|
visibility: '',
|
|
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');
|
|
},
|
|
|
|
afterLeave,
|
|
leaveCancelled: afterLeave
|
|
};
|
|
|
|
function afterLeave(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.js.map
|