1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- '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
|