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

最新推荐文章于 2024-05-13 08:10:13 发布
置顶 最新推荐文章于 2024-05-13 08:10:13 发布
阅读量1.7k 收藏 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 4817
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不生效的问题
热门推荐
a331790021的博客
07-03 1万+
当用到的时候刚开始就是不生效 一、 组件过渡效果 <transition :name="tsName"> <div class="view-list" key="liveList" v-if="whichSelected === 0"> <article-item v-for="(item, index) in liveList" :key="index" :datas="item" @click.native="j
关于vue状态过渡transition不起作用的原因解决
10-17
主要介绍了关于vue状态过渡transition不起作用的原因解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3路由页面切换动画
最新发布
irisMoon06的博客
05-13 860
从这个动态图能看出来，组件切换过程中新组件是立即加入到DOM，而旧组件的移除是先等待动画结束后再移除，所以当在外层定义了flex布局就会使其横向排列。另外Transition总是在旧组件元素下方插入了新组件元素，所以一开始提到的从左往右移动的时候，根据flex布局定位，动画开始时home组件本来是位于about右边的，但是要使其位于about左边，所以要设置其translateX(-200%)。知道了这个，那么接下来将应用其component切换触发的特性，编写路由切换的动画效果。
vue3的router-view上使用transition失效，不显示
qq_43536071的博客
09-08 3236
多个根元素只能使用transition-gruop，可是router-view中过滤不能使用会报错。transition只能包含一个根元素才能有过滤动画效果。vue3后template支持多个根节点。可以像vue2一样再包一层，暂时可以解决。
vue3 后台管理系统路由切换页面的动画过渡效果失败的问题
lovelyYou123的博客
10-19 293
vue3 后台管理系统路由切换页面的动画过渡效果失败的问题，为什么切换路由，没有动画过渡。原来是组件里template 下 放了多个div，在最外层再讨一个div 就可以了。代码没有问题，问题出在哪里。
关于vue3中使用transition组件动画不生效的问题
JandyPam的博客
01-03 1527
关于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 3921
在使用vue3-element-admin框架中，发现菜单过渡动画失效了，刚开始以为是框架的问题，后来拉取vue3脚手架发现transform标签动画都不可以使用，解决问题后又发现v-enter-active失效，本文章提供了详细的解决方案。...
【Vue】transition标签不生效
Yss915的博客
12-07 2671
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 1111
在router-view标签设置 key属性，并且确保是唯一的，这里我设置 :key=“$route.fullPath”这样直接设置会发现路由切换时并没有效果，但是你每次修改代码后保存刷新页面时却又能看到一次动画效果。修改后，transition动画就正常了。
Vue中使用router-view渲染不成功
weixin_56035334的博客
06-06 5452
在div中引入router-link标签实现路由的切换后，再在指定的位置使用router-view显示与 url 对应的组件，发现页面无法正常渲染。
vue3 菜单路由切换，页面空白没更新
qq_43241730的博客
09-02 1206
vue3 菜单路由切换
Vue3快速上手（十五）Vue3路由器使用和简单路由切换
一掬净土
03-02 1031
路由器：通常指的是我们家里上网用的路由器，通过网络接口，一根网线，链接至电脑，一般我们的电脑就可以上网了，多个网络接口，链接多个电脑，形成一组路由。而路由器就是管理这些路由线路的。Vue里的路由器也是这个意思，通过点击，输入的方式使得浏览器得知发生变化的时候，路由器可以通过当前页面的地址，定位对应的组件，从而显示到指定页面。这里路径和页面组件就是一组一组的路由，而Vue的路由器是用来管理这些路由的。
vue3路由切换过渡动画
08-02
在Vue3中，可以使用`transition`组件和`RouterView`组件来实现路由切换过渡动画。根据引用[1]和引用[2]的代码片段，可以看出在`RouterView`组件内部使用`transition`组件来包裹`component`组件，并通过`v-slot`指令...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值