diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 8c9665920..a3ec885a2 100644
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -34,7 +34,7 @@ const AutoComplete = defineComponent({
...autoCompleteProps,
prefixCls: PropTypes.string,
showSearch: PropTypes.looseBool,
- transitionName: PropTypes.string.def('ant-slide-up'),
+ transitionName: PropTypes.string,
choiceTransitionName: PropTypes.string.def('zoom'),
autofocus: PropTypes.looseBool,
backfill: PropTypes.looseBool,
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 95cf0b89f..d0c2983ff 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -28,6 +28,7 @@ import { tuple, withInstall } from '../_util/type';
import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
import { useInjectFormItemContext } from '../form/FormItemContext';
import omit from '../_util/omit';
+import { getTransitionName } from '../_util/transition';
export interface CascaderOptionType {
value?: string | number;
@@ -113,7 +114,7 @@ const cascaderProps = {
// onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
/** 选择后展示的渲染函数 */
displayRender: PropTypes.func,
- transitionName: PropTypes.string.def('ant-slide-up'),
+ transitionName: PropTypes.string,
popupStyle: PropTypes.object.def(() => ({})),
/** 自定义浮层类名 */
popupClassName: PropTypes.string,
@@ -487,6 +488,7 @@ const Cascader = defineComponent({
} = extraAttrs;
const getPrefixCls = this.configProvider.getPrefixCls;
const renderEmpty = this.configProvider.renderEmpty;
+ const rootPrefixCls = getPrefixCls();
const prefixCls = getPrefixCls('cascader', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
@@ -636,6 +638,7 @@ const Cascader = defineComponent({
...onEvents,
onPopupVisibleChange: this.handlePopupVisibleChange,
onChange: this.handleChange,
+ transitionName: getTransitionName(rootPrefixCls, 'slide-up', props.transitionName),
};
return {input};
},
diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index 3d9d8ad0a..ca3650e7a 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -75,7 +75,7 @@ export default defineComponent({
],
slots: ['expandIcon', 'overflowedIndicator'],
setup(props, { slots, emit, attrs }) {
- const { prefixCls, direction } = useConfigInject('menu', props);
+ const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props);
const store = ref>({});
const siderCollapsed = inject(SiderCollapsedKey, ref(undefined));
const inlineCollapsed = computed(() => {
@@ -293,12 +293,12 @@ export default defineComponent({
[`${prefixCls.value}-${props.theme}`]: true,
};
});
-
- const defaultMotions = {
- horizontal: { name: `ant-slide-up` },
+ const rootPrefixCls = computed(() => getPrefixCls());
+ const defaultMotions = computed(() => ({
+ horizontal: { name: `${rootPrefixCls.value}-slide-up` },
inline: collapseMotion,
- other: { name: `ant-zoom-big` },
- };
+ other: { name: `${rootPrefixCls.value}-zoom-big` },
+ }));
useProvideFirstLevel(true);
@@ -381,7 +381,7 @@ export default defineComponent({
inlineCollapsed: mergedInlineCollapsed,
antdMenuTheme: computed(() => props.theme),
siderCollapsed,
- defaultMotions: computed(() => (isMounted.value ? defaultMotions : null)),
+ defaultMotions: computed(() => (isMounted.value ? defaultMotions.value : null)),
motion: computed(() => (isMounted.value ? props.motion : null)),
overflowDisabled: ref(undefined),
onOpenChange: onInternalOpenChange,
diff --git a/components/select/index.tsx b/components/select/index.tsx
index fb6225261..836bbb539 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -9,6 +9,7 @@ import { tuple } from '../_util/type';
import useConfigInject from '../_util/hooks/useConfigInject';
import omit from '../_util/omit';
import { useInjectFormItemContext } from '../form/FormItemContext';
+import { getTransitionName } from '../_util/transition';
type RawValue = string | number;
@@ -37,7 +38,7 @@ export const selectProps = () => ({
size: PropTypes.oneOf(tuple('small', 'middle', 'large', 'default')),
mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')),
bordered: PropTypes.looseBool.def(true),
- transitionName: PropTypes.string.def('ant-slide-up'),
+ transitionName: PropTypes.string,
choiceTransitionName: PropTypes.string.def(''),
});
@@ -89,7 +90,11 @@ const Select = defineComponent({
return mode;
});
- const { prefixCls, direction, configProvider } = useConfigInject('select', props);
+ const { prefixCls, direction, configProvider, getPrefixCls } = useConfigInject('select', props);
+ const rootPrefixCls = computed(() => getPrefixCls());
+ const transitionName = computed(() =>
+ getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName),
+ );
const mergedClassName = computed(() =>
classNames({
[`${prefixCls.value}-lg`]: props.size === 'large',
@@ -189,6 +194,7 @@ const Select = defineComponent({
id={id}
dropdownRender={selectProps.dropdownRender || slots.dropdownRender}
v-slots={{ option: slots.option }}
+ transitionName={transitionName.value}
>
{slots.default?.()}
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index ffbe5cf73..9d79db951 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -57,7 +57,6 @@ const TreeSelect = defineComponent({
name: 'ATreeSelect',
inheritAttrs: false,
props: initDefaultProps(treeSelectProps, {
- transitionName: 'ant-slide-up',
choiceTransitionName: '',
listHeight: 256,
treeIcon: false,
@@ -101,7 +100,15 @@ const TreeSelect = defineComponent({
dropdownMatchSelectWidth,
size,
getPopupContainer,
+ getPrefixCls,
} = useConfigInject('select', props);
+ const rootPrefixCls = computed(() => getPrefixCls());
+ const transitionName = computed(() =>
+ getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName),
+ );
+ const choiceTransitionName = computed(() =>
+ getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName),
+ );
const treePrefixCls = computed(() =>
configProvider.getPrefixCls('select-tree', props.prefixCls),
);
@@ -154,8 +161,6 @@ const TreeSelect = defineComponent({
listItemHeight,
multiple,
treeIcon,
- transitionName,
- choiceTransitionName,
treeLine,
switcherIcon = slots.switcherIcon?.(),
fieldNames = props.replaceFields,
@@ -197,7 +202,6 @@ const TreeSelect = defineComponent({
},
attrs.class,
);
- const rootPrefixCls = configProvider.getPrefixCls();
const otherProps: any = {};
if (props.treeData === undefined && slots.default) {
otherProps.children = flattenChildren(slots.default());
@@ -227,8 +231,7 @@ const TreeSelect = defineComponent({
getPopupContainer={getPopupContainer.value}
treeMotion={null}
dropdownClassName={mergedDropdownClassName.value}
- choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
- transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
+ choiceTransitionName={choiceTransitionName.value}
onChange={handleChange}
onBlur={handleBlur}
onSearch={handleSearch}
@@ -238,6 +241,7 @@ const TreeSelect = defineComponent({
treeCheckable: () => ,
}}
{...otherProps}
+ transitionName={transitionName.value}
/>
);
};