Tabs height animation not working with display-directive="show"

[marianheinsen]

TuSimple/naive-ui version (版本)

2.29.0

Vue version (Vue 版本)

3.2.34

Browser and its version (浏览器及其版本)

Chrome(102.0.5005.61)

System and its version (系统及其版本)

MacOS(12.4)

Node version (Node 版本)

v16.15.0

Reappearance link (重现链接)

https://codesandbox.io/s/confident-khayyam-577zk5?file=/src/App.vue

Reappearance steps (重现步骤)

Open the link to CodeSandbox and switch between the Login and Registration tab or:

Create an NTabs component with animated prop and two NTabPanes inside. Use display-directive="show" with both tab panes and make the content of the second pane larger than the first pane. Then switch between the two tabs.

Expected results (期望的结果)

When switching between the tabs, the height of the pane wrapper should transition smoothly according to the height of the content.

Actual results (实际的结果)

Only when switching from the tab with smaller height to the tab with larger height is the height of the pane wrapper animated, not vice versa.

Remarks (补充说明)

With display-directive="if" the height transition is working in both directions, but I need to preserve state between tab switches.

[07akioni]

This is an interesting bug. The reason is that beforeLeave hook & enter hook order of vue's transition-group children are not consistent.

[marianheinsen]

Thanks so much for the quick fix!