在tagsview中切换的时候,tagsview下面的组件加载过渡需要有个动画效果。并且具有组件缓存的效果。如果是组件数据没有改变,那么就不需要重新加载组件而是直接载入缓存的组件。针对这种效果就叫基于路由的动态过渡。那么我们了解了需求就可以把需求分为两部分:
一. 在 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种解决办法:
<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>
<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的联合。发现问题解决问题。能够更加好的引发思考和解决问题的能力。从而对课程有更深程度的理解。希望在后续学习中有更多这种解决问题的机会。