当用到的时候刚开始就是不生效
一、 组件过渡效果
<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了 引以为记
