vue项目路由切换动画

178 阅读1分钟

做项目时,领导要求首次加载的页面添加动画效果,缓存页面不能有动画效果

image.png

缓存使用keep-alive,在store里面设置cachedViews数组,每次路由跳转收集当前路由信息,如果cachedViews存在则return,不存在则添加。(element-admin自带的,不多赘述)

重点是transition,transition的name接收动画,在store里面添加isTransform字段,判断是否需要动画。

image.png

然后在 ADD_CACHED_VIEW方法中设置

state.isTransform = true;

在DEL_CACHED_VIEW,DEL_OTHERS_CACHED_VIEWS,DEL_ALL_CACHED_VIEWS方法中设置

state.isTransform =false;

最后回到appmain.vue中 设置

  <transition :name="$store.state.tagsView.isTransform?'fade-transform':''" mode="out-in" >
      <!-- <router-view :key="key" /> -->
       <keep-alive :include="cachedViews"> 
        <router-view></router-view>
      </keep-alive>
    </transition>

切记,keep-alive缓存时每个页面的name要和router的name一致否则无效