perf: update transition

components/_util/getTransitionGroupProps.js

@@ -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;

components/_util/getTransitionProps.js

@@ -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;

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 <Tag {...rest}>{slots.default?.()}</Tag>;
+      };
+    },
+  });
+}
+
+export { Transition, TransitionGroup };
+
+export default Transition;

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

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

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 = {

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, {

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 (
+    return <TransitionGroup {...transitionProps}>{items}</TransitionGroup>;
-      <TransitionGroup {...transitionProps}>
-        {items}
-      </TransitionGroup>
-    );
   },
 });
 

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

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();

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

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() {}
 

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__';
 

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

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

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));
-//     }
-//   }
-// };