1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- const getMoveTranslate = direction => {
- const value = '100%';
- return {
- left: `translateX(-${value})`,
- right: `translateX(${value})`,
- top: `translateY(-${value})`,
- bottom: `translateY(${value})`
- }[direction];
- };
- const getEnterLeaveStyle = (startStyle, endStyle) => ({
- '&-enter, &-appear': Object.assign(Object.assign({}, startStyle), {
- '&-active': endStyle
- }),
- '&-leave': Object.assign(Object.assign({}, endStyle), {
- '&-active': startStyle
- })
- });
- const getFadeStyle = (from, duration) => Object.assign({
- '&-enter, &-appear, &-leave': {
- '&-start': {
- transition: 'none'
- },
- '&-active': {
- transition: `all ${duration}`
- }
- }
- }, getEnterLeaveStyle({
- opacity: from
- }, {
- opacity: 1
- }));
- const getPanelMotionStyles = (direction, duration) => [getFadeStyle(0.7, duration), getEnterLeaveStyle({
- transform: getMoveTranslate(direction)
- }, {
- transform: 'none'
- })];
- const genMotionStyle = token => {
- const {
- componentCls,
- motionDurationSlow
- } = token;
- return {
- [componentCls]: {
- // ======================== Mask ========================
- [`${componentCls}-mask-motion`]: getFadeStyle(0, motionDurationSlow),
- // ======================= Panel ========================
- [`${componentCls}-panel-motion`]: ['left', 'right', 'top', 'bottom'].reduce((obj, direction) => Object.assign(Object.assign({}, obj), {
- [`&-${direction}`]: getPanelMotionStyles(direction, motionDurationSlow)
- }), {})
- }
- };
- };
- var _default = exports.default = genMotionStyle;
|