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.7KB

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