expand-transition.mjs 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. // Utilities
  2. import { camelize } from 'vue';
  3. export default function () {
  4. let expandedParentClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  5. let x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  6. const sizeProperty = x ? 'width' : 'height';
  7. const offsetProperty = camelize(`offset-${sizeProperty}`);
  8. return {
  9. onBeforeEnter(el) {
  10. el._parent = el.parentNode;
  11. el._initialStyle = {
  12. transition: el.style.transition,
  13. overflow: el.style.overflow,
  14. [sizeProperty]: el.style[sizeProperty]
  15. };
  16. },
  17. onEnter(el) {
  18. const initialStyle = el._initialStyle;
  19. el.style.setProperty('transition', 'none', 'important');
  20. // Hide overflow to account for collapsed margins in the calculated height
  21. el.style.overflow = 'hidden';
  22. const offset = `${el[offsetProperty]}px`;
  23. el.style[sizeProperty] = '0';
  24. void el.offsetHeight; // force reflow
  25. el.style.transition = initialStyle.transition;
  26. if (expandedParentClass && el._parent) {
  27. el._parent.classList.add(expandedParentClass);
  28. }
  29. requestAnimationFrame(() => {
  30. el.style[sizeProperty] = offset;
  31. });
  32. },
  33. onAfterEnter: resetStyles,
  34. onEnterCancelled: resetStyles,
  35. onLeave(el) {
  36. el._initialStyle = {
  37. transition: '',
  38. overflow: el.style.overflow,
  39. [sizeProperty]: el.style[sizeProperty]
  40. };
  41. el.style.overflow = 'hidden';
  42. el.style[sizeProperty] = `${el[offsetProperty]}px`;
  43. void el.offsetHeight; // force reflow
  44. requestAnimationFrame(() => el.style[sizeProperty] = '0');
  45. },
  46. onAfterLeave,
  47. onLeaveCancelled: onAfterLeave
  48. };
  49. function onAfterLeave(el) {
  50. if (expandedParentClass && el._parent) {
  51. el._parent.classList.remove(expandedParentClass);
  52. }
  53. resetStyles(el);
  54. }
  55. function resetStyles(el) {
  56. const size = el._initialStyle[sizeProperty];
  57. el.style.overflow = el._initialStyle.overflow;
  58. if (size != null) el.style[sizeProperty] = size;
  59. delete el._initialStyle;
  60. }
  61. }
  62. //# sourceMappingURL=expand-transition.mjs.map