博客

问题

简述：基于vite+vue3的项目搭建完成后，发现router切换有点僵硬，准备加入router过渡动画，但是出现了一些问题，我花了1天的时间终于得到解决，但是不希望更多的人在这个问题上花1天的时间。

实现过程：

1. router添加动画相关代码
2. 问题1：添加动画后，第一个路由有动画，其余路由页面空白
3. 问题2：控制台报错： renders non-element root node that cannot be animated.
4. 我解决后发现，解决了问题2，问题1也就解决了

代码

1、router 动画相关代码

<!-- 组件说明 -->
<template>
  <router-view v-slot="{ Component, route }">
    <transition name="nmmh" mode="out-in">
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
</template>

<script setup>
</script>

<style scoped lang='scss'>
/* 渐变设置 */
.nmmh-enter-from,
.nmmh-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
.nmmh-enter-to,
.nmmh-leave-from {
  opacity: 1;
}
.nmmh-enter-active {
  transition: all 0.7s ease;
}
.nmmh-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>

3、问题2 解决
我分析问题的过程：路由动画，在参阅文档等材料建立好初期配置，发现问题，
我以为是router配置问题，最终发现不是。<Transition> renders non-element root
 node that cannot be animated.这句话想必需要一些英语基础，所有有时间
 要好好学英语，我们可以理解为 " 没有根的元素不可以有动画",所以我们的
 报错位置在router-view 下的组件里，我开始排查相关router组件，发现我的
 Index组件有俩个代码块，但是没有根，加上后所有异常消失。

总结

1. 每一个template模板都应该有一个根节点，这其实是一个规范，我没有遵守
2. 对于vue的相关机制了解不够深入
3. 不能够独立判断出问题关键

Tips

1. 参考作者文献
   
   任磊abc