diff --git a/components/_util/getTransitionGroupProps.js b/components/_util/getTransitionGroupProps.js
deleted file mode 100644
index ff89c570d..000000000
--- a/components/_util/getTransitionGroupProps.js
+++ /dev/null
@@ -1,21 +0,0 @@
-// import animate from './css-animation';
-const getTransitionGroupProps = (transitionName, opt = {}) => {
- if (process.env.NODE_ENV === 'test') {
- return { css: false, ...opt };
- }
- const transitionProps = transitionName ? {
- appear: true,
- appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
- appearActiveClass: `${transitionName}`,
- appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
- enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
- enterActiveClass: `${transitionName}`,
- enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
- leaveActiveClass: `${transitionName} ${transitionName}-leave`,
- leaveToClass: `${transitionName}-leave-active`,
- ...opt,
- } : { css: false, ...opt };
- return transitionProps;
-};
-
-export default getTransitionGroupProps;
diff --git a/components/_util/getTransitionProps.js b/components/_util/getTransitionProps.js
deleted file mode 100644
index 6a23b224a..000000000
--- a/components/_util/getTransitionProps.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const getTransitionProps = (transitionName, opt = {}) => {
- if (process.env.NODE_ENV === 'test') {
- return { css: false, ...opt };
- }
- const transitionProps = transitionName ? {
- appear: true,
- appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
- // appearActiveClass: `antdv-base-transtion`,
- appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
- enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
- // enterActiveClass: `antdv-base-transtion`,
- enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
- leaveFromClass: ` ${transitionName}-leave`,
- leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
- leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
- ...opt,
- }: { css: false, ...opt };
- return transitionProps;
-};
-
-export default getTransitionProps;
diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx
new file mode 100644
index 000000000..029fe22c3
--- /dev/null
+++ b/components/_util/transition.tsx
@@ -0,0 +1,60 @@
+import { defineComponent, Fragment, Transition as T, TransitionGroup as TG } from 'vue';
+
+export const getTransitionProps = (transitionName: string, opt: object = {}) => {
+ const transitionProps = transitionName
+ ? {
+ appear: true,
+ appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
+ // appearActiveClass: `antdv-base-transtion`,
+ appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
+ enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
+ // enterActiveClass: `antdv-base-transtion`,
+ enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
+ leaveFromClass: ` ${transitionName}-leave`,
+ leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
+ leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
+ ...opt,
+ }
+ : { css: false, ...opt };
+ return transitionProps;
+};
+
+export const getTransitionGroupProps = (transitionName: string, opt: object = {}) => {
+ const transitionProps = transitionName
+ ? {
+ appear: true,
+ appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
+ appearActiveClass: `${transitionName}`,
+ appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
+ enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
+ enterActiveClass: `${transitionName}`,
+ enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
+ leaveActiveClass: `${transitionName} ${transitionName}-leave`,
+ leaveToClass: `${transitionName}-leave-active`,
+ ...opt,
+ }
+ : { css: false, ...opt };
+ return transitionProps;
+};
+
+let Transition = T;
+let TransitionGroup = TG;
+
+if (process.env.NODE_ENV === 'test') {
+ Transition = (_, { slots }) => {
+ return slots.default?.();
+ };
+ TransitionGroup = defineComponent({
+ props: ['tag', 'class'],
+ setup(props, { slots }) {
+ const { tag: Tag = Fragment, ...rest } = props;
+ return () => {
+ return {slots.default?.()};
+ };
+ },
+ });
+}
+
+export { Transition, TransitionGroup };
+
+export default Transition;
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 0f9065e4b..919b86648 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -1,4 +1,4 @@
-import { Transition, inject, cloneVNode, defineComponent, App } from 'vue';
+import { inject, cloneVNode, defineComponent, App } from 'vue';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
@@ -11,7 +11,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import classNames from '../_util/classNames';
import BaseMixin from '../_util/BaseMixin';
import PropTypes from '../_util/vue-types';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
index 163eb823c..c96d9c816 100644
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -1,11 +1,11 @@
-import { App, defineComponent, inject, Transition } from 'vue';
+import { App, defineComponent, inject } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import backTopTypes from './backTopTypes';
import addEventListener from '../vc-util/Dom/addEventListener';
import getScroll from '../_util/getScroll';
import BaseMixin from '../_util/BaseMixin';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
import { defaultConfigProvider } from '../config-provider';
import scrollTo from '../_util/scrollTo';
diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx
index a1197d06e..f3fa613dc 100644
--- a/components/badge/Badge.tsx
+++ b/components/badge/Badge.tsx
@@ -4,10 +4,10 @@ import { PresetColorTypes } from '../_util/colors';
import classNames from '../_util/classNames';
import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
import { cloneElement } from '../_util/vnode';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
import isNumeric from '../_util/isNumeric';
import { defaultConfigProvider } from '../config-provider';
-import { inject, Transition, defineComponent, CSSProperties } from 'vue';
+import { inject, defineComponent, CSSProperties } from 'vue';
import { tuple } from '../_util/type';
const BadgeProps = {
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 08b489ca0..12a8622dc 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -1,8 +1,8 @@
-import { inject, provide, Transition, PropType, defineComponent, computed } from 'vue';
+import { inject, provide, PropType, defineComponent, computed } from 'vue';
import cloneDeep from 'lodash-es/cloneDeep';
import PropTypes from '../_util/vue-types';
import classNames from '../_util/classNames';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
import Row from '../grid/Row';
import Col from '../grid/Col';
import hasProp, {
diff --git a/components/transfer/renderListBody.tsx b/components/transfer/renderListBody.tsx
index a0ef4b450..df521cbdc 100644
--- a/components/transfer/renderListBody.tsx
+++ b/components/transfer/renderListBody.tsx
@@ -1,9 +1,9 @@
-import { defineComponent, TransitionGroup } from 'vue';
+import { defineComponent } from 'vue';
import raf from '../_util/raf';
import ListItem from './ListItem';
import PropTypes, { withUndefined } from '../_util/vue-types';
import { findDOMNode } from '../_util/props-util';
-import getTransitionGroupProps from '../_util/getTransitionGroupProps';
+import { getTransitionGroupProps, TransitionGroup } from '../_util/transition';
const ListBody = defineComponent({
name: 'ListBody',
inheritAttrs: false,
@@ -105,11 +105,7 @@ const ListBody = defineComponent({
onScroll: this.handleScroll,
},
);
- return (
-
- {items}
-
- );
+ return {items};
},
});
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
index 428d124f2..7e33999a6 100644
--- a/components/upload/UploadList.tsx
+++ b/components/upload/UploadList.tsx
@@ -1,7 +1,12 @@
-import { defineComponent, inject, Transition, TransitionGroup, CSSProperties } from 'vue';
+import { defineComponent, inject, CSSProperties } from 'vue';
import BaseMixin from '../_util/BaseMixin';
import { getOptionProps, initDefaultProps } from '../_util/props-util';
-import getTransitionProps from '../_util/getTransitionProps';
+import {
+ getTransitionProps,
+ Transition,
+ getTransitionGroupProps,
+ TransitionGroup,
+} from '../_util/transition';
import { defaultConfigProvider } from '../config-provider';
import { previewImage, isImageUrl } from './utils';
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
@@ -15,7 +20,6 @@ import Tooltip from '../tooltip';
import Progress from '../progress';
import classNames from '../_util/classNames';
import { UploadListProps } from './interface';
-import getTransitionGroupProps from '../_util/getTransitionGroupProps';
export default defineComponent({
name: 'AUploadList',
diff --git a/components/vc-dialog/Dialog.jsx b/components/vc-dialog/Dialog.jsx
index 7888baa4a..d06606c61 100644
--- a/components/vc-dialog/Dialog.jsx
+++ b/components/vc-dialog/Dialog.jsx
@@ -1,10 +1,10 @@
-import { defineComponent, provide, Transition } from 'vue';
+import { defineComponent, provide } from 'vue';
import { initDefaultProps, getSlot, findDOMNode } from '../_util/props-util';
import KeyCode from '../_util/KeyCode';
import contains from '../vc-util/Dom/contains';
import LazyRenderBox from './LazyRenderBox';
import BaseMixin from '../_util/BaseMixin';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
import switchScrollingEffect from '../_util/switchScrollingEffect';
import getDialogPropTypes from './IDialogPropTypes';
const IDialogPropTypes = getDialogPropTypes();
diff --git a/components/vc-menu/SubMenu.jsx b/components/vc-menu/SubMenu.jsx
index dd4f637ad..8e6d1c98b 100644
--- a/components/vc-menu/SubMenu.jsx
+++ b/components/vc-menu/SubMenu.jsx
@@ -1,4 +1,4 @@
-import { Transition, inject, provide } from 'vue';
+import { inject, provide } from 'vue';
import omit from 'omit.js';
import PropTypes from '../_util/vue-types';
import Trigger from '../vc-trigger';
@@ -10,7 +10,7 @@ import BaseMixin from '../_util/BaseMixin';
import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
let guid = 0;
const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
diff --git a/components/vc-notification/Notification.jsx b/components/vc-notification/Notification.jsx
index e168fb536..28d0a7d8b 100644
--- a/components/vc-notification/Notification.jsx
+++ b/components/vc-notification/Notification.jsx
@@ -1,10 +1,10 @@
-import { createApp, defineComponent, TransitionGroup } from 'vue';
+import { createApp, defineComponent } from 'vue';
import PropTypes from '../_util/vue-types';
import { getComponent } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import createChainedFunction from '../_util/createChainedFunction';
import Notice from './Notice';
-import getTransitionGroupProps from '../_util/getTransitionGroupProps';
+import { getTransitionGroupProps, TransitionGroup } from '../_util/transition';
function noop() {}
diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx
index cb009cad1..62150d741 100644
--- a/components/vc-select/Selector/MultipleSelector.tsx
+++ b/components/vc-select/Selector/MultipleSelector.tsx
@@ -8,7 +8,6 @@ import {
defineComponent,
onMounted,
ref,
- TransitionGroup,
VNodeChild,
watch,
watchEffect,
@@ -17,7 +16,7 @@ import {
import classNames from '../../_util/classNames';
import pickAttrs from '../../_util/pickAttrs';
import PropTypes from '../../_util/vue-types';
-import getTransitionGroupProps from '../../_util/getTransitionGroupProps';
+import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition';
const REST_TAG_KEY = '__RC_SELECT_MAX_REST_COUNT__';
diff --git a/components/vc-tree/src/TreeNode.jsx b/components/vc-tree/src/TreeNode.jsx
index bf1cfbdb3..7971c4eff 100644
--- a/components/vc-tree/src/TreeNode.jsx
+++ b/components/vc-tree/src/TreeNode.jsx
@@ -1,10 +1,10 @@
-import { defineComponent, inject, provide, Transition } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
import PropTypes from '../../_util/vue-types';
import classNames from '../../_util/classNames';
import { getNodeChildren, mapChildren, warnOnlyTreeNode, getDataAndAria } from './util';
import { initDefaultProps, getComponent, getSlot } from '../../_util/props-util';
import BaseMixin from '../../_util/BaseMixin';
-import getTransitionProps from '../../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../../_util/transition';
function noop() {}
const ICON_OPEN = 'open';
diff --git a/components/vc-trigger/Popup.jsx b/components/vc-trigger/Popup.jsx
index 5bc1dd246..705878a95 100644
--- a/components/vc-trigger/Popup.jsx
+++ b/components/vc-trigger/Popup.jsx
@@ -1,4 +1,3 @@
-import { Transition } from 'vue';
import PropTypes from '../_util/vue-types';
import Align from '../vc-align';
import PopupInner from './PopupInner';
@@ -6,7 +5,7 @@ import LazyRenderBox from './LazyRenderBox';
import BaseMixin from '../_util/BaseMixin';
import { saveRef } from './utils';
import { splitAttrs, findDOMNode } from '../_util/props-util';
-import getTransitionProps from '../_util/getTransitionProps';
+import { getTransitionProps, Transition } from '../_util/transition';
export default {
name: 'VCTriggerPopup',
diff --git a/tests/setup.js b/tests/setup.js
index c35cb6fc7..5590ecbcc 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -32,24 +32,3 @@ global.cancelAnimationFrame = function(cb) {
const mockMath = Object.create(global.Math);
mockMath.random = () => 0.5;
global.Math = mockMath;
-
-// Vue.component('transition-group', {
-// props: ['tag'],
-// render(createElement) {
-// return createElement(this.tag || 'div', null, this.$slots.default);
-// },
-// });
-
-// Vue.prototype.$emit = function() {
-// const vm = this;
-// const args = [].slice.call(arguments, 0);
-// const filterEvent = [];
-// const eventName = args[0];
-// if (args.length && vm.$listeners[eventName]) {
-// if (filterEvent.includes(eventName)) {
-// vm.$emit(eventName, ...args.slice(1));
-// } else {
-// vm.$listeners[eventName](...args.slice(1));
-// }
-// }
-// };