Collapse - Detect transition start; sliding height transition when content changes

[hell001]

I have a few questions about the Collapse item.

1. When animateOpacity is set to true, the opacity of the collapse item will fade to 0 when it closes. My desired behavior is to only fade the opacity of the content inside the collapse, while the collapse itself retains its full opacity of 1 and slides all the way up. See apple.com for what I mean. On apple.com, hovering over one of the tabs and moving the mouse away will cause the text to fade away but the collapse itself remains fully present and slides up. Using CSS, and with animateOpacity set to false, I can conditionally set a className to set the opacity of the content to 0 with a transition, so that the content slowly fades to zero opacity while the collapse is sliding up. Is this a reasonable workaround or is there a more native way to do it?

.collapseContent {
  transition: opacity 300ms ease-in-out;
}

.collapseContentHidden {
  opacity: 0;
}

<Collapse in={opened} transitionDuration={300} animateOpacity={false}>
  <CollapseContent className={`${classes.collapseContent} ${!isCollapseVisible ? classes.collapseContentHidden : ""}`}>
  ...
  </CollapseContent>
</Collapse>

2. Following the above, another issue is: it works fine when the collapse closes, but when opening the collapse, the content does not animate from 0 to 1 opacity. It's just 1 the whole time as when it slides open the content is immediately visible rather than fading into view. Why does the opacity animate correctly when closing but not when opening?
   (I see that collapse has a onTransitionEnd prop, but does it have some kind onTransitionStart behavior as well that I can look into? I've had to do a workaround by creating a ref and adding an event listener for 'transitionstart' to get the desired opacity behavior when the collapse opens, but again was wondering if there is a better way to do it)
3. My page has a header with multiple items. when the collapse opens and I want to choose another header item, the content inside the collapse will obviously change to match the currently hovered item. however, the visual change is very abrupt. How can I make it so that the height slides to match the new content rather than just flicker? Again see apple.com for a good example of the desired behavior - moving mouse between the different tabs at the top.

[rtivital]

Collapse component is designed to one simple use case, it is not meant for complex animations. In this case, it is more suitable to use a dedicated animation library like framer motion.