Vue3+Tsx给路由加切换动画时的踩坑及解决

目录

• 项目场景
• 样式文件
• 步骤
• 最终代码
• 总结

项目场景

用最新的技术栈Vue+Tsx给后台管理系统路由加动画时，语法上与模板语法有些许不同，记录下自己的踩坑记录

样式文件

新建文件transITion.scss，这里用的是若依框架人家写好的样式，写好之后在全局引入该样式文件

// global transition css/* fade */.fade-enter-active,.fade-leave-active {
      transition: opacity 0.28s;
}
.fade-enter,.fade-leave-active {
      opacity: 0;
}
/* fade-transform */.fade-transform-leave-active,.fade-transform-enter-active {
      transition: all 0.5s;
}
.fade-transform-enter {
      opacity: 0;
      transform: translatex(-30px);
}
.fade-transform-leave-to {
      opacity: 0;
      transform: translateX(30px);
}
/* breadcrumb transition */.breadcrumb-enter-active,.breadcrumb-leave-active {
      transition: all 0.5s;
}
.breadcrumb-enter,.breadcrumb-leave-active {
      opacity: 0;
      transform: translateX(20px);
}
.breadcrumb-move {
      transition: all 0.5s;
}
.breadcrumb-leave-active {
      position: absolute;
}
    

步骤

首先是第一步尝试给路由加过渡动画，代码如下

div style={
{
 flex: "1", paddingTop: "12px", height: 0 }
}
    >
    Transition name="fade-transform" mode="out-in">
    RouterView  v-slots={
{
        default: ({
 component: RouteComponent }
: {
 Component: any }
    ) =>
 {
                return RouteComponent />
        }
    }
}
        >
    /RouterView>
    /Transition>
    /div>
    

这时候路由完全没动画并且报了一个警告

Component inside Transition> renders non-element root node that cannot be aniMATEd.  

意思是在Transition动画节点下只能有一个根节点，这时候再尝试把RouteComponent外面套一层div

div style={
{
 flex: "1", paddingTop: "12px", height: 0 }
}
    >
    Transition name="fade-transform" mode="out-in">
    RouterView  v-slots={
{
        default: ({
 Component: RouteComponent }
: {
 Component: any }
    ) =>
 {
                return div>
    RouteComponent />
    /div>
        }
    }
}
        >
    /RouterView>
    /Transition>
    /div>
    

这时候还是没有切换动画的，新警告来了

router-view>
     can no longer be used directly inside transition>
     or keep-alive>
.Use slot PRops instead:router-view v-slot="{
 Component }
    ">
      transition>
        component :is="Component" />
      /transition>
    /router-view>
    

意思是说router-view不能放在transition下，好的那我们换一种写法试试

div style={
{
 flex: "1", paddingTop: "12px", height: 0 }
}
    >
  RouterView v-slots={
{
      default: ({
 Component: RouteComponent }
: {
 Component: any }
    ) =>
 {
              return Transition name="fade-transform" mode="out-in">
                  div>
     RouteComponent />
    /div>
              /Transition>
      }
  }
}
      >
    /RouterView>
    /div>
    

这时候就很完美，没警告了。但是？？王德发？？切换动效在哪里？？我陷入了沉思，官方文档里给的示例是切换显示隐藏的时候用v-if，也就是隐藏的时候dom节点被销毁了，是不是我这个没重新渲染呢？？这时候给div加上一个动态的key让它重新渲染就好了

import {
useRoute }
     From 'vue-router';
    const route = useRoute()

div style={
{
 flex: "1", paddingTop: "12px", height: 0 }
}
    >
  RouterView v-slots={
{
      default: ({
 Component: RouteComponent }
: {
 Component: any }
    ) =>
 {
              return Transition name="fade-transform" mode="out-in">
              div key={
route.path}
    >
     RouteComponent />
    /div>
              /Transition>
      }
  }
}
      >
    /RouterView>
    /div>
    

这时候就好了，虽然是可以了，但是这个any类型让我很是不舒服，本着一定要写代码优雅的原则，最后改动一下

最终代码

div style={
{
 flex: "1", paddingTop: "12px", height: 0 }
}
    >
RouterView v-slots={
{
    default:  ({
 Component }
: {
 Component: VNode }
    ) =>
 {
            return Transition name="fade-transform" mode="out-in">
            div key={
route.path}
 style={
{
 height: "100%" }
}
    >
                {
createVNode(Component)}
                /div>
            /Transition>
    }
}
}
    />
    /div>
    

这样看着就舒服了

总结

最后想说，TSX真香！走新技术的路上难免会遇到很多坑，但解决了真的很舒服

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• 关于Vue3过渡动画的踩坑记录
• 浅谈vue-router路由切换 组件重用挖下的坑
• vue3+ts+vite2项目实战踩坑记录

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！