我正在尝试用React/Joy-UI动画一个折叠列表
这是我的过渡元素

<Transition nodeRef={nodeRef} in={browseOpen} timeout={1000}>
      {(state: string) => (<List
        aria-labelledby="nav-list-browse"
        sx={{
          '& .JoyListItemButton-root': { p: '8px' },
          transition: '1000ms',
          transitionProperty: 'max-height',
          overflow: 'hidden',
          ...{
            exiting: { maxHeight: '0px'},
            exited: { maxHeight: '0px'},
            entering: { maxHeight: '500px'},
            entered: { maxHeight: '500px'},
          }[state],
        }}
      >

这样，列表可以很好地扩展，但在折叠时似乎有一个延迟。
然后，我将“cubic-bezier（0，1，0，1）”添加到“transition”属性，这修复了折叠动画，但扩展动画似乎完全中断。
我怎样才能让进入和退出都正常工作？
在添加立方体贝塞尔曲线之前（抱歉，损失了y gif）：

添加立方贝塞尔曲线后：