Vue transition-group для нескольких компонентов

207

26 августа 2018, 22:10

подскажите, что я делаю не так. Есть компонент родитель tabs.vue и дочерний компонент tab.vue. в зависимости от выбранного пункта в tabs.vue, в tab.vue переключается состояние active и через 'v-if="active" отображается нужный таб из списка. Пытаюсь сделать анимацию через transition-group но ничего не происходит :( key также задал, пробовал в css .-leave-active добавлять 'position: absolute' тоже не помогло

//---------------------------------------------------------------- 
//tabs.vue //template 
//---------------------------------------------------------------- 
<div class="tabs"> 
    <ul class="tabs-menu"> 
        <li class="tabs-menu__item" v-for="tab in tabs" :class="{ 'active' :  tab.active}"> 
          <a @click.prevent="selectTab(tab)"  
             href="#" class="tabs-menu__link"> {{name}} </a> 
          </li> 
    </ul> 
    <div class="tabs-content"> 
        <slot></slot> 
    </div> 
</div> 
 
//---------------------------------------------------------------- 
//tab.vue //template 
//---------------------------------------------------------------- 
 
<div class="tabs-content__item" v-if="active"> 
    <slot></slot> 
</div> 
 
//---------------------------------------------------------------- 
//component.vue //template 
//---------------------------------------------------------------- 
 
<tabs> 
  <transition-group name="fadeIn"> 
    <tab key="1"></tab> 
    <tab key="2"></tab> 
    <tab key="3"></tab> 
    <tab key="4"></tab> 
  </transition-group> 
</tabs>