继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第3天 全新升级,基于Vue3最新标准,打造后台综合解决方案之处理基于路由的动态过渡

liuying525
关注TA
已关注
手记 24
粉丝 4
获赞 4

课程章节:5-42:方案落地:处理基于路由的动态过渡

课程讲师:Sunday

课程内容:

在tagsview中切换的时候,tagsview下面的组件加载过渡需要有个动画效果。并且具有组件缓存的效果。如果是组件数据没有改变,那么就不需要重新加载组件而是直接载入缓存的组件。针对这种效果就叫基于路由的动态过渡。那么我们了解了需求就可以把需求分为两部分:

  1. 动态加载组件,组件的过渡动画。(由动画组件配合CSS完成)
  2. 组件状态的动态缓存 keep-alive

一. 在 appmain 中处理对应代码逻辑

<template>
  <div class="app-main">
    <router-view v-slot="{ Component, route }">
      <transition name="fade-transform" mode="out-in">
        <keep-alive>
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

二. 增加了 tags 之后,app-main 的位置需要进行以下处理

<style lang="scss" scoped>
.app-main {
 min-height: calc(100vh - 50px - 43px);
 ...
 padding: 104px 20px 20px 20px;
 ...
}
</style>

三 在 styles/transition 中增加动画渲染

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

根据上述写法写完之后会发现一个BUG。那就是当切换到个人中心来回切换的时候,个人中心的组件再次跳转回来时候没有被渲染。当时比较困惑,同来通过自己的试验找出了2种解决办法:

  1. 给个人中心下面的组件添加一个div确保个人中心的根元素只有一个div。
<template>
  <div>
    <div class="">个人中心</div>
    <el-row>
      <el-button>Default</el-button>
      <el-button type="primary">Primarty</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>
  1. 根据官网的写法,改变appmain路由过渡的写法。appMain.vue
<template>
  <div class="app-main">
    <!-- 带有切换动画,并且能动态缓存的view -->
    <router-view v-slot="{ Component, route }">
      <transition name="fade-transform" >
       
          <component :is="Component" :key="route.path"></component>
       
      </transition>
    </router-view>
  </div>
</template>

但这样写会引发一个新的问题,那就是切换的时候下面的组件会有个跳动的不太好的体验。这个时候可以结合上面的给个人中心加个div然后还不够,还需要把CSS中的离开的动画延迟删除只留下进入的。这样就能解决啦。

课程收获:

谢谢老师,讲的非常细致,很容易懂。这一节学的是tagsView切换时候的动态过渡效果。通过实践和官网API的联合。发现问题解决问题。能够更加好的引发思考和解决问题的能力。从而对课程有更深程度的理解。希望在后续学习中有更多这种解决问题的机会。

课程截图

图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP