CODEWITHSUNDEEP
vue.js
Gerd
Gerd

Reputation: 89

Why can't I get vue transition-group working?

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!

Upvotes: 1

Views: 455

Answers (1)

tao
tao

Reputation: 90138

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.

Upvotes: 2

Related Questions