12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- // 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
|