vue中transition不生效的问题
当用到的时候刚开始就是不生效一、组件过渡效果<transition :name="tsName"><div class="view-list" key="liveList" v-if="whichSelected === 0"><article-itemv-for="(item, index) in liveList":key="index":datas="item"
·
当用到的时候刚开始就是不生效
一、 组件过渡效果
<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了
引以为记
更多推荐
所有评论(0)