Use transition on row-details

I can’t seem to find a way to implement this, so I wanted to ask here. I want to show the row details with a “slide down” transition, so it looks like a little drawer opening below the row, then closing when _showDetails is removed. I have the CSS transition built already, and I have it working fine with a regular table. Everything displays properly when I toggle _showDetails, just no transition.

Here’s what I have in my code right now:

<b-table  
        :items="items"
        hover
        class="small"
      >
        <template v-slot:row-details="row">
          <transition name="slide-down" appear>
            <div v-if="isWarmingUp(row.item)" class="d-flex w-100">
              <div class="mx-auto text-center pt-2">
                <i class="fas fa-lightbulb fa-2x" />
                <p>Warming up</p>
              </div>
            </div>
            <div v-else class="d-flex w-100">
              <div class="mx-auto">
                Confirming hits
                <p class="text-center">{{ row.item.foundCount || row.item.messageCount }}</p>
              </div>
              <div class="mx-auto">
                Aggregating
                <p class="text-center">{{ row.item.messageCount }}</p>
              </div>
            </div>
          </transition>
        </template>
      </b-table>

[dochoss]

You were right. v-if on the content inside the transition worked. Had to do some fiddling with it to get it to work with my model, but definitely did the trick. Thanks so much for the help!

For reference, here’s the final pseudocode for it:

<template v-slot:row-details="row">
  <animation-component :row="row" />
</template>

...
AnimationComponent.vue
<transition> 
  <div  v-if="show">
...code from above here...
  </div>
</transition>

data() {
  return {
    show: false
  }
}
created() ){
  this.$nextTick(() => this.show = true);
}

[TuringJest]

If there was a table option to not hide all row-details by default we could wrap the content into a collapse and just trigger that one. It already works by toggling the detail and then the collapse but we will loose the animation on close of course. So it would need a timeout on close which is a bit inelegant.

Or there could be a row-child slot that would act like a detail and be visible by default.