关于vue3路由之间切换,使用transition过渡不起作用

最新推荐文章于 2024-05-13 08:10:13 发布
置顶 最新推荐文章于 2024-05-13 08:10:13 发布
阅读量1.6k 收藏 1
点赞数 2
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45048851/article/details/126294869
版权

 

         这是路由切换的代码，注意div结构,根据官方文档API,应该没什么问题,当我进行路由切换的时候发现

        当默认进入A组件时,能够正常过度,在点击路由B的时候B组件时直接显示出来,并没有过度效        果,于是去网上查了很多,发现都是在自定义class自己写样式去进行控制,自己也试了,没效果,

于是我就在比较这两个组件的差异,有什么不同会引入过度效果不会生效,我就在检查A组件页面结构,如下图

这是A组件结构

 

这是B组件的结构

 那么大概知道是什么原因了,在vue2中组件不允许使用多根节点,必须拿div包裹住

vue3中这一点去除了，可以写多个节点,我去查看节点内容 果然不一样.....

组件A

 

组件B

 

 

 解决办法:  在B组件最外层包裹一个大DIV,最终过渡效果正常

ζั͡ั͡苏乞儿_ั͡͡ั͡
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
weixin_39834767的博客
12-20 4773
vue 刷新之后 嵌套路由不变 重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...
vue页面切换过渡transition效果
01-19
首先得有你想要的过渡效果css代码： .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: ...
关于vue状态过渡transition不起作用的原因解决
01-19
总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。 <transition name=你要的名字> 过渡的元素... </transition> 这里需要主要一点的是：过渡的元素只能是以下之一： 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 常用的过渡名称有fade等 你可以这样用 <transition name=fade> 过渡的元素... </transition> 实现的效果就是淡入淡出。 如果需要自定义过渡动画的，记得在css中修改以下的类名： 你要的名字-enter   
Vue3根组件设置Transition失效的问题
乐于分享，共同成长
09-27 1060
解决Vue根组件设置transition失效的问题
vue3路由页面切换动画
最新发布
irisMoon06的博客
05-13 608
从这个动态图能看出来，组件切换过程中新组件是立即加入到DOM，而旧组件的移除是先等待动画结束后再移除，所以当在外层定义了flex布局就会使其横向排列。另外Transition总是在旧组件元素下方插入了新组件元素，所以一开始提到的从左往右移动的时候，根据flex布局定位，动画开始时home组件本来是位于about右边的，但是要使其位于about左边，所以要设置其translateX(-200%)。知道了这个，那么接下来将应用其component切换触发的特性，编写路由切换的动画效果。
vue3实现路由切换页面动画之transition
CYL_2021的博客
10-12 7361
本次练习在使用vue3+vue-router4实现路由切换页面动画时，本来以为使用transition就可以直接完成了，但没想到过程中问题不断，接下来就总结一下出现的问题。
vue3的router-view上使用transition失效，不显示
qq_43536071的博客
09-08 3180
多个根元素只能使用transition-gruop，可是router-view中过滤不能使用会报错。transition只能包含一个根元素才能有过滤动画效果。vue3后template支持多个根节点。可以像vue2一样再包一层，暂时可以解决。
vue3 后台管理系统路由切换页面的动画过渡效果失败的问题
lovelyYou123的博客
10-19 282
vue3 后台管理系统路由切换页面的动画过渡效果失败的问题，为什么切换路由，没有动画过渡。原来是组件里template 下 放了多个div，在最外层再讨一个div 就可以了。代码没有问题，问题出在哪里。
关于vue3中使用transition组件动画不生效的问题
JandyPam的博客
01-03 1384
关于vue3中使用transition组件动画不生效的问题，需将transition标签内组件的多个根元素写在一个根元素中。
使用vue-router切换页面时实现设置过渡动画
10-16
总之，通过结合vue-router的路由配置、`<transition>`组件以及CSS过渡效果，我们可以轻松地为Vue应用中的页面切换添加过渡动画。这不仅提升了应用的视觉效果，还能提供更接近原生应用的用户体验。在开发过程中，不断...
vue组件 keep-alive 和 transition 使用详解
10-16
在Vue.js中，`keep-alive`和`transition`组件是两种非常重要的功能，它们分别用于组件的状态管理和过渡效果。 1. **`keep-alive`组件**：`keep-alive`的主要作用是缓存组件，使得组件的状态在切换时得以保留，避免...
vue路由切换之淡入淡出的简单实现
12-30
想让路由有过渡动画，需要在标签的外部添加<transition>标签，标签还需要一个name属性 <transition name=fade mode=in-out> <router></router> </transition> css过渡类名： 组件过渡过程中，会有四个CSS类名进行...
Vue Transition实现类原生组件跳转过渡动画的示例
08-29
3. 使用Vue Transition需要在模版中使用封装组件transition，並且使用CSS类名在enter/leave的六种不同的状态过渡中切换。 4. 可以通过使用 `<transition name="my-transition">`来重置前缀。 5. 需要重写跳转函数来...
Vue3中动态组件使用transform标签和Transiton 过渡动画失效的问题
fhfjfkfff的博客
08-12 3882
在使用vue3-element-admin框架中，发现菜单过渡动画失效了，刚开始以为是框架的问题，后来拉取vue3脚手架发现transform标签动画都不可以使用，解决问题后又发现v-enter-active失效，本文章提供了详细的解决方案。...
【Vue】transition标签不生效
Yss915的博客
12-07 2641
transition 标签只能包含 1 个元素；如果里面写了多个元素，则只生效第一个 transition 包裹的标签需要设置 v-show / v-if 属性控制元素的显示否则不生效！ 动画 CSS 样式对应的类名 进入：.v-enter 始状态、.v-enter-to 末状态、.v-enter-active 进入动画（Vue2）离开：.v-leave 始状态、.v-leave-to 末状态、.v-leave-active 离开动画（Vue2）进入：.v-enter-from 始状态、.v-enter-t
解决Vue根组件设置transition失效的问题
weixin_43274097的博客
08-11 1081
在router-view标签设置 key属性，并且确保是唯一的，这里我设置 :key=“$route.fullPath”这样直接设置会发现路由切换时并没有效果，但是你每次修改代码后保存刷新页面时却又能看到一次动画效果。修改后，transition动画就正常了。
Vue中使用router-view渲染不成功
weixin_56035334的博客
06-06 5413
在div中引入router-link标签实现路由的切换后，再在指定的位置使用router-view显示与 url 对应的组件，发现页面无法正常渲染。
vue3 菜单路由切换，页面空白没更新
qq_43241730的博客
09-02 1196
vue3 菜单路由切换
vue3路由切换过渡动画
08-02
在Vue3中，可以使用`transition`组件和`RouterView`组件来实现路由切换过渡动画。根据引用[1]和引用[2]的代码片段，可以看出在`RouterView`组件内部使用`transition`组件来包裹`component`组件，并通过`v-slot`指令来获取`Component`。在`transition`组件上可以设置`name`属性来指定过渡效果的名称，以及`mode`属性来指定过渡模式。其中，`out-in`模式表示要离开的DOM元素离开完毕后，要进入的DOM元素才开始进入，而`in-out`模式表示要进入的DOM元素进入完毕后，要离开的DOM元素才开始离开。引用[3]中的代码片段展示了`out-in`模式的效果。 因此，要在Vue3中实现路由切换过渡动画，可以按照以下步骤进行操作： 1. 在路由组件中使用`transition`组件和`RouterView`组件来包裹要切换的组件。 2. 在`transition`组件上设置`name`属性来指定过渡效果的名称。 3. 在`transition`组件上设置`mode`属性来指定过渡模式，可以选择`out-in`或`in-out`。 4. 在`RouterView`组件上使用`v-slot`指令来获取`Component`。 5. 在`component`组件上使用`:is`属性来动态绑定要切换的组件。 通过以上步骤，就可以实现Vue3中的路由切换过渡动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值