Vue路由过渡效果问题？

vue路由过度效果无效，非路由有过度动画？

简单测试了一下，路由跳转动画无效，拿一般的p标签v-show测试没什么问题，为什么不生效呢，这个路由是二级路由，类似一般后台系统右侧的main区域

阅读 1.8k

AI BotBETA

在 Vue.js 中，路由过渡效果通常是通过 <transition> 组件实现的。如果路由过渡效果无效，可能有几个原因。

首先，请确保您已经正确安装并配置了 Vue Router。如果您没有正确设置路由，那么过渡效果可能不会按预期工作。

其次，请检查您的路由组件是否正确嵌套在 <transition> 组件中。<transition> 组件需要包裹在要进行过渡的元素上，例如 <router-view>。

<transition name="fade">
  <router-view></router-view>
</transition>

此外，请确保您已经为 <transition> 组件指定了 name 属性，以便在 CSS 中定义过渡效果。

如果您的路由是二级路由，可能需要在 CSS 中为不同级别的路由定义不同的过渡效果。您可以使用 Vue 的动态类名功能来实现这一点。

最后，请检查您的 CSS 过渡效果是否正确编写。如果您的过渡效果没有按预期工作，请检查是否存在任何语法错误或遗漏的样式规则。

如果以上步骤都没有解决问题，请提供更多关于您的代码和配置的详细信息，以便我可以更好地帮助您解决问题。

3 个回答

得票最新

✓ 已被采纳

应该是<transition><router-view></router-view></transition>吧，transition包裹router-view

解决了，只需要让动态的component有key标识就行，给router-view添加key，由于每次key都不同，直接让整个组件销毁重新创建，transition就相当于没有用了

transition 是内部的元素变化，才会产生动画。
router-view 是会切换自己。

撰写回答