69 lines
2.7 KiB
JavaScript
69 lines
2.7 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
|
||
|
|
exports.default = function () {
|
||
|
|
var expandedParentClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
||
|
|
var x = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||
|
|
|
||
|
|
var sizeProperty = x ? 'width' : 'height';
|
||
|
|
return {
|
||
|
|
beforeEnter: function beforeEnter(el) {
|
||
|
|
el._parent = el.parentNode;
|
||
|
|
el._initialStyle = _defineProperty({
|
||
|
|
transition: el.style.transition,
|
||
|
|
visibility: el.style.visibility,
|
||
|
|
overflow: el.style.overflow
|
||
|
|
}, sizeProperty, el.style[sizeProperty]);
|
||
|
|
},
|
||
|
|
enter: function enter(el) {
|
||
|
|
var initialStyle = el._initialStyle;
|
||
|
|
el.style.setProperty('transition', 'none', 'important');
|
||
|
|
el.style.visibility = 'hidden';
|
||
|
|
var size = el['offset' + (0, _helpers.upperFirst)(sizeProperty)] + 'px';
|
||
|
|
el.style.visibility = initialStyle.visibility;
|
||
|
|
el.style.overflow = 'hidden';
|
||
|
|
el.style[sizeProperty] = 0;
|
||
|
|
void el.offsetHeight; // force reflow
|
||
|
|
el.style.transition = initialStyle.transition;
|
||
|
|
expandedParentClass && el._parent && el._parent.classList.add(expandedParentClass);
|
||
|
|
requestAnimationFrame(function () {
|
||
|
|
el.style[sizeProperty] = size;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
afterEnter: resetStyles,
|
||
|
|
enterCancelled: resetStyles,
|
||
|
|
leave: function leave(el) {
|
||
|
|
el._initialStyle = _defineProperty({
|
||
|
|
overflow: el.style.overflow
|
||
|
|
}, sizeProperty, el.style[sizeProperty]);
|
||
|
|
el.style.overflow = 'hidden';
|
||
|
|
el.style[sizeProperty] = el['offset' + (0, _helpers.upperFirst)(sizeProperty)] + 'px';
|
||
|
|
void el.offsetHeight; // force reflow
|
||
|
|
requestAnimationFrame(function () {
|
||
|
|
return el.style[sizeProperty] = 0;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
afterLeave: afterLeave,
|
||
|
|
leaveCancelled: afterLeave
|
||
|
|
};
|
||
|
|
function afterLeave(el) {
|
||
|
|
expandedParentClass && el._parent && el._parent.classList.remove(expandedParentClass);
|
||
|
|
resetStyles(el);
|
||
|
|
}
|
||
|
|
function resetStyles(el) {
|
||
|
|
el.style.overflow = el._initialStyle.overflow;
|
||
|
|
el.style[sizeProperty] = el._initialStyle[sizeProperty];
|
||
|
|
delete el._initialStyle;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var _helpers = require('../../util/helpers');
|
||
|
|
|
||
|
|
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; }
|
||
|
|
//# sourceMappingURL=expand-transition.js.map
|