vue中transition不生效的问题

当用到的时候刚开始就是不生效

一、 组件过渡效果

<transition :name="tsName">
  <div class="view-list" key="liveList" v-if="whichSelected === 0">
    <article-item
      v-for="(item, index) in liveList"
      :key="index"
      :datas="item"
      @click.native="jump(item)"
    ></article-item>
  </div>
  <div class="videoBs" key="videoList" v-else>
    <div v-for="(item, index) in videoList">
      <video-recommend
        @videoClick="videoClick"
        v-if="item && item.status === 2"
        :videoObj="item"
        :key="item.id"
      ></video-recommend>
    </div>
  </div>
</transition>

以上是正确的代码
踩坑日记： v-if 以及 key 是必需的 transtion的name 给一个想要的过渡效果 基本都是可以实现的

二、vue路由过渡效果

<transition :name="transitionName">
 // <div class="app-box">
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view class="router-view" :key="$route.name" @showLoad="showLoading"></router-view>
    </keep-alive>
    <router-view
      v-if="!$route.meta.keepAlive"
      class="router-view"
      :key="$route.name"
      @showLoad="showLoading"
    ></router-view>
    <v-loading v-show="isLoading"></v-loading>
    // </div>
  </transition>

踩坑日记：因为我在外面多包了一层div 导致一直不生效，注释掉就ok了
引以为记