I've created a code sandbox for a tab component. The transition-group does not work and I can't figure out why. Here's the link to the code sandbox. https://codesandbox.io/s/vue3-tab-component-tailwind-useyrr

Thanks!

CodePudding user response：

All the v-for elements are added to DOM on mount. They basically transition while their contents are being hidden.

I don't know why you expect the v-show elements to transition, because you haven't added a transition at that level.

In my estimation, you don't need a v-for. All you need is a <transition> around a div showing the active tab content.

See it working.

Notes:

• I've slightly refactored making a tab active (by using the tab index)
• I fixed the transition classes (note this breaking change in the v3 migration guide)
• note the appear and mode="out-in" attributes on the <transition>
• probably the most important is the :key attribute on the inner div of the <transition>. It makes the element get replaced when activeTabIndex changes. Without that :key, Vue would reuse the same DOM element and we wouldn't see a transition, except the entering one, when mounting the parent component.