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

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

项目场景

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

样式文件

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

// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

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

.fade-transform-enter {
  opacity: 0;
  transform: trans latex (-30px);
}

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

/*  br eadcrumb 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", h ei ght: 0 }}>
<Transition n am e="fade-transform" mode="out -i n">
    <RouterView  v -s lots={{
        default: ({  component : RouteComponent }: { Component: any }) => {
            return <RouteComponent />
        }
    }}
    ></RouterView>
</Transition>
</div>

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

Component inside <Transition> renders non-element root node t hat cannot be ani MATE d.&nbs p;  

意思 是在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  PR ops 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项目实战踩坑记录

总结

以上是 为你收集整理的 Vue3+Tsx给路由加切换动画时的踩坑及解决 全部内容，希望文章能够帮你解决 Vue3+Tsx给路由加切换动画时的踩坑及解决 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3+Tsx给路由加切换动画时的踩坑及解决的详细内容...