vue过渡动画transition，进入动画失效，离开显示两个页面数据的问题

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量560 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Heartnottowake/article/details/129637903
版权 
.fade--move,//动画
.fade-enter-active, .fade-leave-active {//过渡效果
  transition: all 0.9s;
}
.fade-leave-active{//不加定位，会出现新页面在旧页面下面显示的情况
  position:absolute
}
.fade-leave {  离开的起点
  opacity: 1;
  transform: translateX(0);
}
.fade-leave-to { 离开的终点
  opacity: 1;
  transform: translateX(-200px);
}

进入动画失效，是因为fade-enter没用了
需要重新自定义定义进入动画
使用fade-enter-from和fade-enter-to定义开始和结束动画

心为醒SS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue-router切换页面时实现设置过渡动画
10-16
今天小编就为大家分享一篇使用vue-router切换页面时实现设置过渡动画。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一行奇异代码，解决transition过渡动画无效问题！
w2sft的博客
12-13 485
而加入的一行新代码，是获取div的高度。然后，接下来的语句，将div的高宽设为200px时，就可以触发由100px到200px的过渡动画。在JS代码中将其设置为block，使之显示了出来，并紧接着设置了新的height、width，那么浏览器就按这个大小直接显示出此div。虽然仅是使用了一行很简单的代码，但却是一行非常精妙的代码，蕴含有巧妙的技术原理。如果你想要保护这行JS代码的技术逻辑，可以使用JShaman对JS代码进行混淆加密，使他人无法阅读代码、分析代码。
vue动画只有离场动画，进场动画不生效
朽木自雕的博客
12-07 2411
存在问题的图：（只有离场动画，进场动画不生效） 解决之后效果图： 解决办法： 在transition标签中加入appear属性 <template> <transition mode="out-in" appear> <div class="singer-detail"> </div> </trans...
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
vue 组件中使用 transition 和 transition-group实现过渡动画
10-16
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
vue3实现路由切换页面动画之transition
CYL_2021的博客
10-12 6960
本次练习在使用vue3+vue-router4实现路由切换页面动画时，本来以为使用transition就可以直接完成了，但没想到过程中问题不断，接下来就总结一下出现的问题。
vuejs fade-enter-active 过渡动画没有效果
ActionPig 的 Js
06-08 7544
在做一个仿饿了么外卖页面效果时，有一个详情页面显示隐藏的过渡效果。 在折腾了半天后终于发现，他那个效果是用vue1.0写的，在我这2.5版本的vue面前完全不顶用。找到问题就好办了，赶紧上官网搬了一段救兵回来。 在需要过渡效果的元素外面套一层： <transition name='fade'></transition> 然后添加样式： .fade-enter-active,...
vue 2 路由跳转过渡动画失效问题
LiuaxmIn的博客
11-03 674
当我点击路由跳转的时候 会慢慢的消失(这个时候效果会渐入) 但是跳转后会瞬间显示出页面(没有做到渐出)很影响体验,我看教程的时候 html代码为我上面那样写的 但是直接。当我的html代码为这个样的时候,动画能展示出来 但是渐入渐出 只做渐入 而。
【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
transition过渡动画闪烁同时出现两个页面
leojoe1992的博客
04-14 1047
vue中使用animate.css跳转动画会短暂显示两个页面，导致闪烁，完美解决
解决vue的过渡动画无法正常实现问题
01-19
前记：最近在写vue的一个项目要实现过渡的效果，虽然vue动画不是强项，库也多,但是基本的坑还是得踩扎实; 建议：先学习vue官方文档的进入/离开 & 列表过渡章节，那么我们来看bug; 首先上出现问题的代码 <!...
Vue 过渡（动画）transition组件案例详解
08-31
主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下
vue transition 失效问题
zhongmei121的专栏
06-17 6907
项目中使用transition的时候失效，查找了很久终于找出问题所在，原因是home组件根据路由路径判断显示内容还是<router-view>，导致在layout组件里使用transition失效（home是layout的子组件），在home里面的<router-view>处使用transition也失效。 错误代码： home组件 修改为 去掉v-else那个d...
transition动画过渡没作用（无效）
热门推荐
weixin_45689946的博客
10-27 1万+
transition无效的原因 1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。 css .header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; } .showMenu.layui-layout-admin .header{ left:-200px; } js $(".moveHandle").click(functio
vue中transition进场动画不生效，离开动画生效
cherrylovedog的博客
06-23 4213
如果想要在页面初始化时播放动画需要添加appear和appear-active-class 解决： 1.加appear <transition name="slide" appear></transition> 2 加v-if <transition name="slide" > <div class="detail" v-if="id"></div> </transition> ...
vue使用transition切换页面过渡动画，并解决切换组件时产生的空白
weixin_43996368的博客
06-04 3466
vue使用transition切换页面过渡动画，并解决切换组件时产生的空白name属性mode属性class属性举例templatestyle name属性 如果使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 transition-enter。 mode属性 out-in 当前元素先进行过渡，完成后新元素过渡进入 in-out 新元素元素先进行过渡，完成后当前元素过渡离开 class属性 v-enter，v-enter-active，v-enter-to
解决Vue根组件设置transition失效的问题
weixin_43274097的博客
08-11 972
在router-view标签设置 key属性，并且确保是唯一的，这里我设置 :key=“$route.fullPath”这样直接设置会发现路由切换时并没有效果，但是你每次修改代码后保存刷新页面时却又能看到一次动画效果。修改后，transition动画就正常了。
vue3 后台管理系统路由切换页面的动画过渡效果失败的问题
lovelyYou123的博客
10-19 230
vue3 后台管理系统路由切换页面的动画过渡效果失败的问题，为什么切换路由，没有动画过渡。原来是组件里template 下 放了多个div，在最外层再讨一个div 就可以了。代码没有问题，问题出在哪里。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 377
步骤很详细，直接上教程……
vue的transition过渡动画
06-28
Vue的transition过渡动画是Vue.js框架中用来实现组件的进入和离开过渡效果的功能。它可以在组件的挂载和卸载时自动添加/删除 CSS 类名，实现过渡效果。开发者可以通过添加自定义的 CSS 类名来实现不同的过渡效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值