62 lines
2.4 KiB
JavaScript
62 lines
2.4 KiB
JavaScript
"use strict";
|
|
|
|
var __importDefault = this && this.__importDefault || function (mod) {
|
|
return mod && mod.__esModule ? mod : {
|
|
"default": mod
|
|
};
|
|
};
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.fadeInHeightExpandTransition = fadeInHeightExpandTransition;
|
|
const cssr_1 = require("../../_utils/cssr");
|
|
const _common_1 = __importDefault(require("../common/_common"));
|
|
const {
|
|
cubicBezierEaseInOut,
|
|
cubicBezierEaseOut,
|
|
cubicBezierEaseIn
|
|
} = _common_1.default;
|
|
function fadeInHeightExpandTransition({
|
|
overflow = 'hidden',
|
|
duration = '.3s',
|
|
originalTransition = '',
|
|
leavingDelay = '0s',
|
|
foldPadding = false,
|
|
enterToProps = undefined,
|
|
leaveToProps = undefined,
|
|
reverse = false
|
|
} = {}) {
|
|
const enterClass = reverse ? 'leave' : 'enter';
|
|
const leaveClass = reverse ? 'enter' : 'leave';
|
|
return [(0, cssr_1.c)(`&.fade-in-height-expand-transition-${leaveClass}-from,
|
|
&.fade-in-height-expand-transition-${enterClass}-to`, Object.assign(Object.assign({}, enterToProps), {
|
|
opacity: 1
|
|
})), (0, cssr_1.c)(`&.fade-in-height-expand-transition-${leaveClass}-to,
|
|
&.fade-in-height-expand-transition-${enterClass}-from`, Object.assign(Object.assign({}, leaveToProps), {
|
|
opacity: 0,
|
|
marginTop: '0 !important',
|
|
marginBottom: '0 !important',
|
|
paddingTop: foldPadding ? '0 !important' : undefined,
|
|
paddingBottom: foldPadding ? '0 !important' : undefined
|
|
})), (0, cssr_1.c)(`&.fade-in-height-expand-transition-${leaveClass}-active`, `
|
|
overflow: ${overflow};
|
|
transition:
|
|
max-height ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
|
|
opacity ${duration} ${cubicBezierEaseOut} ${leavingDelay},
|
|
margin-top ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
|
|
margin-bottom ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
|
|
padding-top ${duration} ${cubicBezierEaseInOut} ${leavingDelay},
|
|
padding-bottom ${duration} ${cubicBezierEaseInOut} ${leavingDelay}
|
|
${originalTransition ? `,${originalTransition}` : ''}
|
|
`), (0, cssr_1.c)(`&.fade-in-height-expand-transition-${enterClass}-active`, `
|
|
overflow: ${overflow};
|
|
transition:
|
|
max-height ${duration} ${cubicBezierEaseInOut},
|
|
opacity ${duration} ${cubicBezierEaseIn},
|
|
margin-top ${duration} ${cubicBezierEaseInOut},
|
|
margin-bottom ${duration} ${cubicBezierEaseInOut},
|
|
padding-top ${duration} ${cubicBezierEaseInOut},
|
|
padding-bottom ${duration} ${cubicBezierEaseInOut}
|
|
${originalTransition ? `,${originalTransition}` : ''}
|
|
`)];
|
|
} |