Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

expand-transition.js 2.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  2. import { upperFirst } from '../../util/helpers';
  3. export default function () {
  4. var expandedParentClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  5. var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  6. var sizeProperty = x ? 'width' : 'height';
  7. return {
  8. beforeEnter: function beforeEnter(el) {
  9. el._parent = el.parentNode;
  10. el._initialStyle = _defineProperty({
  11. transition: el.style.transition,
  12. visibility: el.style.visibility,
  13. overflow: el.style.overflow
  14. }, sizeProperty, el.style[sizeProperty]);
  15. },
  16. enter: function enter(el) {
  17. var initialStyle = el._initialStyle;
  18. el.style.setProperty('transition', 'none', 'important');
  19. el.style.visibility = 'hidden';
  20. var size = el['offset' + upperFirst(sizeProperty)] + 'px';
  21. el.style.visibility = initialStyle.visibility;
  22. el.style.overflow = 'hidden';
  23. el.style[sizeProperty] = 0;
  24. void el.offsetHeight; // force reflow
  25. el.style.transition = initialStyle.transition;
  26. expandedParentClass && el._parent && el._parent.classList.add(expandedParentClass);
  27. requestAnimationFrame(function () {
  28. el.style[sizeProperty] = size;
  29. });
  30. },
  31. afterEnter: resetStyles,
  32. enterCancelled: resetStyles,
  33. leave: function leave(el) {
  34. el._initialStyle = _defineProperty({
  35. overflow: el.style.overflow
  36. }, sizeProperty, el.style[sizeProperty]);
  37. el.style.overflow = 'hidden';
  38. el.style[sizeProperty] = el['offset' + upperFirst(sizeProperty)] + 'px';
  39. void el.offsetHeight; // force reflow
  40. requestAnimationFrame(function () {
  41. return el.style[sizeProperty] = 0;
  42. });
  43. },
  44. afterLeave: afterLeave,
  45. leaveCancelled: afterLeave
  46. };
  47. function afterLeave(el) {
  48. expandedParentClass && el._parent && el._parent.classList.remove(expandedParentClass);
  49. resetStyles(el);
  50. }
  51. function resetStyles(el) {
  52. el.style.overflow = el._initialStyle.overflow;
  53. el.style[sizeProperty] = el._initialStyle[sizeProperty];
  54. delete el._initialStyle;
  55. }
  56. }
  57. //# sourceMappingURL=expand-transition.js.map