vue 2 路由跳转过渡动画失效问题

最新推荐文章于 2023-09-17 11:16:38 发布
最新推荐文章于 2023-09-17 11:16:38 发布
阅读量674 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiuaxmIn/article/details/127673639
版权

这是我的路由配置

 这是我的html代码

 

 这是CSS样式

 

 

 当我的html代码为这个样的时候,动画能展示出来 但是渐入渐出 只做渐入 而没有做到渐出 当我点击路由跳转的时候 会慢慢的消失(这个时候效果会渐入)  但是跳转后会瞬间显示出页面(没有做到渐出)很影响体验,我看教程的时候 html代码为我上面那样写的 但是直接失去了动画效果 任何动画都没有了

 

LiuaxmIn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决vue的过渡动画无法正常实现问题
01-19
前记：最近在写vue的一个项目要实现过渡的效果，虽然vue动画不是强项，库也多,但是基本的坑还是得踩扎实; 建议：先学习vue官方文档的进入/离开 & 列表过渡章节，那么我们来看bug; 首先上出现问题的代码 <!...
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue利用路由钩子token过期后跳转到登录页的实例
08-29
下面小编就为大家带来一篇Vue利用路由钩子token过期后跳转到登录页的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue+router路由跳转不起作用的一项原因
11-20
如下所示： Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:’history’, 原因如下 补充知识：vue-router配置后地址栏输入跳转不
vue 解决addRoutes动态添加路由后刷新失效问题
01-21
前言 某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。 应用场景：用户a登录进系统，页面上有个按钮，点击之后会动态添加路由并且跳转，跳转过去之后，用户刷新后也会停留在当前页面。 不点这个按钮，浏览器输入地址，用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击按钮，用addRutes动态添加路由并跳转，并把路由保存; 2.用户在新跳转的页面，刷新
vue的transition进场过度不生效的可能原因
Chris_Ning的博客
02-02 1579
参考：https://v3.vuejs.org/guide/transitions-enterleave.html。现象：用vue自带的transition写了一个过度，奇怪的是进场不生效，出场生效。我是vue3但使用了vue2的写法，所以不生效。代码：一个简单的显隐控制。
vue2使用transition过渡效果时，样式发生错误，过渡结束后，样式正确显示
赢是渺然一线，输才是常态 的博客
04-02 1478
因为业务要求，我自己写了一个popup组件，在需要用户确认的地方调用显示，为了提升体验，所以想给popup增加淡入淡出的效果，于是用了animate.css和transition组件，但是在过渡过程中发生了样式错误，具体看下图： 过渡完成后，正确显示： 尝试 一开始，我认为可能是z-index的问题，但是即使我把z-index调到100000，还是没有正确显示，而且过渡结束之后，是能正确显示的...
vue transition 失效问题
zhongmei121的专栏
06-17 6907
项目中使用transition的时候失效，查找了很久终于找出问题所在，原因是home组件根据路由路径判断显示内容还是<router-view>，导致在layout组件里使用transition失效（home是layout的子组件），在home里面的<router-view>处使用transition也失效。 错误代码： home组件 修改为 去掉v-else那个d...
vue过渡动画transition，进入动画失效，离开显示两个页面数据的问题
Heartnottowake的博客
03-18 560
使用fade-enter-from和fade-enter-to定义开始和结束动画。进入动画失效，是因为fade-enter没用了。需要重新自定义定义进入动画。
vue2/vue3 Transition+routerView实现过渡动画效果
SunFlower914的博客
12-02 2898
这里涉及到两个知识点：Transition+routerView，下面先展示下vue官网相关使用说明：1.Vue 提供了Transition内置组件，可以帮助制作基于状态变化的过渡和动画； 2.是基本的动态组件，所以我们可以用组件给它添加一些过渡效果
【Vue】transition标签不生效
Yss915的博客
12-07 2542
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
vue3 中使用 keep-alive 不生效的原因，及keep-alive使用详细介绍
前端打工人的博客
07-25 9161
keep-alive是vue提供的一个组件，它可以将组件缓存起来，避免在组件切换时，每次都重新渲染，从而提高页面性能和用户体验。因此，keepalive被广泛应用于一些需要频繁切换路由或组件的应用中。keep-alive是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
Vue2-Vue3
weixin_54313757的博客
09-17 73
v-if需要操作dom元素有更高的切换消耗，v-show仅隐藏dom元素，如果需要非常频繁的切换，建议使用v-show较好，如果切换频率低，则使用v-if较好1.作用：向其所在的节点中渲染文本内容。2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。（少用很危险）1.作用：向指定节点中渲染包含html结构的内容。2.与插值语法的区别：(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。(2).v-html可以识别html结构。
Vue3中使用路由常见问题的解决方案
m0_61998604的博客
05-09 2020
Vue3是目前前端界最流行的开发框架之一，其中Vue Router是Vue3中非常重要的一部分。尽管Vue Router相对简单易用，但是在使用过程中还是会遇到一些问题，例如： 如何在Vue3中使用路由？ 如何在Vue3中动态传递路由参数？ 如何在Vue3中实现页面的切换效果？ 在本文中，我们将为您提供一些解决这些问题的解决方案。
vue项目中，增加路由切换页面过渡动画
m0_66743830的博客
02-21 433
【代码】vue项目中，增加路由切换页面过渡动画。
Vue2基础---过渡与动画
qq_68587393的博客
02-16 272
(2.1.8+)(2.1.8+)他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如结合使用十分有用。
关于vue动画没有效果的解决
zhoulib__的博客
11-06 1734
有时使用动画时，动画可能动都不动 这时添加 el.offsetHeight或许可以解决问题 <div id="app"> <input type="button" value="加入到购物车" @click='flag=!flag'> <transition @before-enter='beforeEnter' @enter='enter' @aft...
解决Vue根组件设置transition失效的问题
weixin_43274097的博客
08-11 972
在router-view标签设置 key属性，并且确保是唯一的，这里我设置 :key=“$route.fullPath”这样直接设置会发现路由切换时并没有效果，但是你每次修改代码后保存刷新页面时却又能看到一次动画效果。修改后，transition动画就正常了。
vue中使用过渡动画失效的问题
mrqi122的博客
08-09 1796
例如 定义了 transform: translateX(-50%);，在 vue过渡中在使用transform: translateX(-50%)将失效。只有去掉css 中的transform: translateX(-50%);定义css 属性，再vue中定义过渡属性动画失效（opatcity除外）
vue路由传参刷新失效
最新发布
09-29
路由传参在Vue中确实会在页面刷新时失效。这是因为刷新页面会重新加载Vue实例，导致之前传递的参数丢失。解决这个问题的方法有三种：使用路由params传参、使用路由query传参以及使用Vuex。 1. 通过路由params传参：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值