Using vue transition with multiple v-show

Question

I'm using the following code to show a skeleton loader and when it's completed, it needs to fade out while the other div fades in, in it's place.

<transition name="fade" mode="out-in">
  <b-skeleton-table
    v-show="showSkeletons"
    :rows="5"
    :columns="4"
    :table-props="{ bordered: true, striped: true }"
  />

  <div v-show="showPageContent">
    <slot name="content" />
  </div>

  <div v-show="showEmptyState">
    <slot name="empty-state" />
  </div>
</transition>

I am forced to use v-show because the content slot sometimes contains a table with data, that emits a value whether the table returned has 0 rows or more. Based on that result I want to show the empty state or not.

But documentation states that transitions cannot be used with multiple and requires a v-if directive. Since v-if doesn't render the data inside, I cannot use this because I need the emitted data from the content slot.

score 0 · Answer 1 · answered Mar 09 '23 at 02:29

Since you are attempting to transition multiple elements, I think you may need to look at using a transition-group.

Here is a StackBlitz that will hopefully provide some inspiration for you. You should be able to swap the v-show to use v-if (if) you need that functionality.

Using vue transition with multiple v-show

1 Answers1