How to set transition to tabs?

Question

Vue.js

There is a tabs component -

<template>
  <div>
    <div class="tabs">
      <ul>
        <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
          <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
        </li>
      </ul>
    </div>

    <div class="tabs-details">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return { tabs: [] };
  },

  created() {
    this.tabs = this.$children;
  },
  methods: {
    selectTab(selectedTab) {
      this.tabs.forEach(tab => {
        tab.isActive = tab.name == selectedTab.name;
      });
    }
  }
};
</script>

There is a taba component -

<template>
  <div v-show="isActive">
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    name: { required: true },
    selected: { default: false }
  },

  data() {
    return {
      isActive: false
    };
  },

  computed: {
    href() {
      return "#" + this.name.toLowerCase().replace(/ /g, "-");
    }
  },

  mounted() {
    this.isActive = this.selected;
  }
};
</script>

And the call in the component -

<tabs>
          <tab name="Характеристики" :selected="true">
            <div class="tabs-flex">
              <div class="tabs-flex__item">
                <img src="/fasadalum-tab1.webp" alt />
              </div>
              <div class="tabs-flex__item">
                <h3>МАТЕРИАЛЫ И РАЗМЕРЫ ФАСАДНЫХ РЕЕК ИЗ АЛЮМИНИЯ</h3>
                <p>
                  <strong>Фасадные алюминиевые рейки под дерево</strong> изготавливаются из алюминия с декоративными покрытиями под дерево, однотонный матовый цвет по RAL.
                </p>
                <p>Рейки изготавливаются замкнутой прямоугольной или квадратной формы.</p>
                <p>Крепление реек к стенам, осуществляется на горизонтальную алюминиевую направляющую, с помощью уголка прикрепляемого с обратной стороны.</p>
                <div>Стандартные размеры реек:</div>
                <ul>
                  <li>сечение рейки 60х40мм</li>
                  <li>сечение рейки 80х40мм</li>
                  <li>сечение рейки 80х50мм</li>
                  <li>сечение рейки 100х40мм</li>
                  <li>сечение рейки 100х50мм</li>
                  <li>сечение рейки 120х50мм</li>
                </ul>
                <p>Максимальная длина рейки-ламели из алюминия составляет 6000мм</p>
                <p>Возможно изготовление сечение рейки по вашему проекту</p>
              </div>
            </div>
          </tab>
          <tab name="Цветовые решения">
            <div class="tabs-flex">
              <div class="tabs-flex__item">
                <img src="/fasadalum-tab1.webp" alt />
              </div>
              <div class="tabs-flex__item">
                <h3>ЦВЕТА ПОКРЫТИЙ ФАСАДНЫХ РЕЕК ИЗ АЛЮМИНИЯ ПОД ДЕРЕВО</h3>
                <p>
                  <strong>Фасадные алюминиевые рейки под дерево</strong> различаются по типу покрытия и покраски на следующие виды:
                </p>
                <ul>
                  <li>покрытия под дерево</li>
                  <li>покрытия однотонные металлик</li>
                  <li>покрытия однотонные</li>
                </ul>
                <p>Посмотреть наш каталог цветов, можно по ссылке ниже</p>
                <nuxt-link no-prefetch to="/price">Посмотреть</nuxt-link>
              </div>
            </div>
          </tab>
          <tab name="Прайс лист">
            <h1>Why we do it</h1>
          </tab>
          <tab name="Сроки изготовления">
            <h1>Сроки изготовления</h1>
          </tab>
        </tabs>

Before that, there were tabs that were simply not divided into components and the content was output by v-for from an array with content, it was given a transition-group. Now, no matter how I set the transition, it doesn't work for me. Can someone tell me how to correctly set the transition?

Answer 1

The issue is resolved - you need to wrap the tab component in a transition

<transition name="fade-up">
    <div v-show="isActive">
      <slot></slot>
    </div>
  </transition>