[BUG] Animating height from "0" to "auto" is broken if also changing display from "none" to "block"

[tehapo]

Description

We have an accordion that animates height between auto and 0 when expanding/collapsing. In addition to height animation, we switch the display property between block and none in order to make sure the content is hidden also from screen readers.

However, when upgrading our framer-motion dependency, I noticed this behavior is broken with versions >= v11.2.0. When expanding the accordion, the height jumps instantly to auto instead of animating from 0. If the display property is not animated at the same time, the height animation works correctly. On version v11.1.9, the animation still works as expected when applying the display: none in the transitionEnd (in effect transitionEnd: { display: "none" }).

CodeSandbox

Please check this CodeSandbox which is modified version of dev/react/src/examples/Animation-display-visibility.tsx example, which illustrates the issue.

1. Open the CodeSandbox and open DevTools console to see the console.log output.
2. Click on the toggle button to see how height animates from auto to 0.
3. Click again to see how height instantly jumps from 0 to auto without animating.
4. Repeat steps with the second example to see how height is animated when display property is not animated.