是否可以自定义Chakra UI Menu组件的显隐过渡效果？

完全可以修改Menu组件下List元素的显隐过渡效果，Chakra UI原生Transitions配置、自定义CSS两种方案都可实现，不需要改动组件源码。

• Chakra UI的Menu组件底层基于Framer Motion实现动效，默认自带淡入+轻微上移的显隐过渡，直接给MenuList传递motionProps属性，就能自定义过渡时长、缓动函数、进出状态的样式表现。
• 除了自定义参数，也可以直接复用Chakra内置的ScaleFade、SlideFade等现成过渡效果，不需要额外引入第三方依赖。

import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react'

export default function CustomMenu() {
  return (
    <Menu>
      <MenuButton px={4} py={2} bg="blue.500" color="white" rounded="md">
        点击展开
      </MenuButton>
      <MenuList
        motionProps={{
          transition: { duration: 0.25, ease: "easeInOut" },
          variants: {
            enter: { opacity: 1, scale: 1, y: 0 },
            exit: { opacity: 0, scale: 0.92, y: -6 }
          }
        }}
      >
        <MenuItem>编辑</MenuItem>
        <MenuItem>复制</MenuItem>
        <MenuItem>删除</MenuItem>
      </MenuList>
    </Menu>
  )
}

• 如果不想依赖Chakra内置的动效体系，可以直接写CSS实现过渡：Chakra会给不同状态的MenuList自动打上状态标记，显示状态标记为data-state="open"，隐藏状态标记为data-state="closed"，基于这个属性选择器写过渡规则即可。
  注意：使用该方案需要先关闭Menu默认的内置动效，避免动效冲突，给根Menu组件传motion={null}即可。

// 组件代码
<Menu motion={null}>
  <MenuButton px={4} py={2} bg="gray.100" rounded="md">
    点击展开
  </MenuButton>
  <MenuList className="custom-menu-list">
    <MenuItem>编辑</MenuItem>
    <MenuItem>复制</MenuItem>
  </MenuList>
</Menu>

/* 自定义CSS */
.custom-menu-list {
  transform-origin: top center;
  transition: all 0.2s ease-out;
}
.custom-menu-list[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
}
.custom-menu-list[data-state="closed"] {
  opacity: 0;
  transform: translateY(-10px);
}

• 两种方案都支持自定义任意过渡效果，包括调整时长、缓动曲线、位移/缩放/透明度变化规则，也可以接入自定义CSS关键帧动画，没有功能限制。
• 如果需要实现序列动画、路径动画这类复杂效果，直接给motionProps传入符合Framer Motion规范的动效配置即可，Menu组件会完整透传所有参数。

内容的提问来源于stack exchange，提问作者Ilja