123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.zoomUpOut = exports.zoomUpIn = exports.zoomRightOut = exports.zoomRightIn = exports.zoomOut = exports.zoomLeftOut = exports.zoomLeftIn = exports.zoomIn = exports.zoomDownOut = exports.zoomDownIn = exports.zoomBigOut = exports.zoomBigIn = exports.initZoomMotion = void 0;
- var _cssinjs = require("@ant-design/cssinjs");
- var _motion = require("./motion");
- const zoomIn = exports.zoomIn = new _cssinjs.Keyframes('antZoomIn', {
- '0%': {
- transform: 'scale(0.2)',
- opacity: 0
- },
- '100%': {
- transform: 'scale(1)',
- opacity: 1
- }
- });
- const zoomOut = exports.zoomOut = new _cssinjs.Keyframes('antZoomOut', {
- '0%': {
- transform: 'scale(1)'
- },
- '100%': {
- transform: 'scale(0.2)',
- opacity: 0
- }
- });
- const zoomBigIn = exports.zoomBigIn = new _cssinjs.Keyframes('antZoomBigIn', {
- '0%': {
- transform: 'scale(0.8)',
- opacity: 0
- },
- '100%': {
- transform: 'scale(1)',
- opacity: 1
- }
- });
- const zoomBigOut = exports.zoomBigOut = new _cssinjs.Keyframes('antZoomBigOut', {
- '0%': {
- transform: 'scale(1)'
- },
- '100%': {
- transform: 'scale(0.8)',
- opacity: 0
- }
- });
- const zoomUpIn = exports.zoomUpIn = new _cssinjs.Keyframes('antZoomUpIn', {
- '0%': {
- transform: 'scale(0.8)',
- transformOrigin: '50% 0%',
- opacity: 0
- },
- '100%': {
- transform: 'scale(1)',
- transformOrigin: '50% 0%'
- }
- });
- const zoomUpOut = exports.zoomUpOut = new _cssinjs.Keyframes('antZoomUpOut', {
- '0%': {
- transform: 'scale(1)',
- transformOrigin: '50% 0%'
- },
- '100%': {
- transform: 'scale(0.8)',
- transformOrigin: '50% 0%',
- opacity: 0
- }
- });
- const zoomLeftIn = exports.zoomLeftIn = new _cssinjs.Keyframes('antZoomLeftIn', {
- '0%': {
- transform: 'scale(0.8)',
- transformOrigin: '0% 50%',
- opacity: 0
- },
- '100%': {
- transform: 'scale(1)',
- transformOrigin: '0% 50%'
- }
- });
- const zoomLeftOut = exports.zoomLeftOut = new _cssinjs.Keyframes('antZoomLeftOut', {
- '0%': {
- transform: 'scale(1)',
- transformOrigin: '0% 50%'
- },
- '100%': {
- transform: 'scale(0.8)',
- transformOrigin: '0% 50%',
- opacity: 0
- }
- });
- const zoomRightIn = exports.zoomRightIn = new _cssinjs.Keyframes('antZoomRightIn', {
- '0%': {
- transform: 'scale(0.8)',
- transformOrigin: '100% 50%',
- opacity: 0
- },
- '100%': {
- transform: 'scale(1)',
- transformOrigin: '100% 50%'
- }
- });
- const zoomRightOut = exports.zoomRightOut = new _cssinjs.Keyframes('antZoomRightOut', {
- '0%': {
- transform: 'scale(1)',
- transformOrigin: '100% 50%'
- },
- '100%': {
- transform: 'scale(0.8)',
- transformOrigin: '100% 50%',
- opacity: 0
- }
- });
- const zoomDownIn = exports.zoomDownIn = new _cssinjs.Keyframes('antZoomDownIn', {
- '0%': {
- transform: 'scale(0.8)',
- transformOrigin: '50% 100%',
- opacity: 0
- },
- '100%': {
- transform: 'scale(1)',
- transformOrigin: '50% 100%'
- }
- });
- const zoomDownOut = exports.zoomDownOut = new _cssinjs.Keyframes('antZoomDownOut', {
- '0%': {
- transform: 'scale(1)',
- transformOrigin: '50% 100%'
- },
- '100%': {
- transform: 'scale(0.8)',
- transformOrigin: '50% 100%',
- opacity: 0
- }
- });
- const zoomMotion = {
- zoom: {
- inKeyframes: zoomIn,
- outKeyframes: zoomOut
- },
- 'zoom-big': {
- inKeyframes: zoomBigIn,
- outKeyframes: zoomBigOut
- },
- 'zoom-big-fast': {
- inKeyframes: zoomBigIn,
- outKeyframes: zoomBigOut
- },
- 'zoom-left': {
- inKeyframes: zoomLeftIn,
- outKeyframes: zoomLeftOut
- },
- 'zoom-right': {
- inKeyframes: zoomRightIn,
- outKeyframes: zoomRightOut
- },
- 'zoom-up': {
- inKeyframes: zoomUpIn,
- outKeyframes: zoomUpOut
- },
- 'zoom-down': {
- inKeyframes: zoomDownIn,
- outKeyframes: zoomDownOut
- }
- };
- const initZoomMotion = (token, motionName) => {
- const {
- antCls
- } = token;
- const motionCls = `${antCls}-${motionName}`;
- const {
- inKeyframes,
- outKeyframes
- } = zoomMotion[motionName];
- return [(0, _motion.initMotion)(motionCls, inKeyframes, outKeyframes, motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid), {
- [`
- ${motionCls}-enter,
- ${motionCls}-appear
- `]: {
- transform: 'scale(0)',
- opacity: 0,
- animationTimingFunction: token.motionEaseOutCirc,
- '&-prepare': {
- transform: 'none'
- }
- },
- [`${motionCls}-leave`]: {
- animationTimingFunction: token.motionEaseInOutCirc
- }
- }];
- };
- exports.initZoomMotion = initZoomMotion;
|