记录vue中使用了transition后使用fixed引起的Bug

最新推荐文章于 2024-08-15 12:47:17 发布
最新推荐文章于 2024-08-15 12:47:17 发布
阅读量1.9k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： transition fixed
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/107711543
在Vue项目中，使用transition组件后，固定定位（fixed）元素出现异常，底部导航在页面加载时会从底部弹起。问题源于fixed定位与transition的结合。为解决此问题，将底部导航改为不使用定位，而是通过calc(100vh - 底部高度)计算位置，并设置滚动，从而避免了底部元素弹起的bug。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在项目的layout页面中使用了transition组件，接着页面里面某些使用fixed定位的元素就出现了问题，如图
在这里插入图片描述
底部导航这个元素一开始会从底部弹起

造成这样的原因可能是由于使用了fixed定位引起的，而且上面部分用了calc(100% -底部的高度)

接下就这样解决了
在这里插入图片描述

底部改成不用定位，滚动的地方使用calc(100vh -底部的高度)，再设置滚动，这样就解决了底部弹起的bug

.r-image {
   
   
  .container {
   
   
    width: 100%;
    // height: calc(100% - 120px);
    height
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue中使用swiper轮播图展示并可点击查看大图
weixin_33961829的博客
07-25 2721
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue 品牌列表padStart方法的使用
mqingo的博客
01-04 665
06品牌列表padStart方法的使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
vue transition动画 fixed定位初始化错乱
暖光的博客
04-05 2254
vue组件切换动画 但fixed定位会导致页面初始化错乱一下，有解决办法欢迎交流 <transition :name="$store.state.global.EXCESSIVE"> <router-view/> </transition> .slide-right-enter-active, ....
关于transition动画下，如果有fixed元素，渲染的奇葩问题
weixin_34290000的博客
03-26 752
之前我们机票页面有生成一个低价日历，然后我们有一个需求就是滚动到那个月份，对应显示这个月，然后这个区域是fixed定位的，然后奇怪的事情发生了，就是低价日历的动画执行完后，修改页面的html却没有正常更新。（因为那个区域显示有点问题，我截图的地方也是fixed元素）然后大家可以看到以上截图，改变了dom后页面没有重新渲染（可以这里用词有误，反正是没有渲染正常。） 然后我就找了小钗（http:/...
vue van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决
sinat_42888557的博客
04-20 1963
vue vant2 van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决 <template> <van-tabs v-model="active"> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 3">内容 3</van-ta
vue底部分页利用position: fixed固定，切换时闪动问题
likexiziname的博客
05-21 951
vue底部分页利用position: fixed固定，切换时闪动问题
vue ＜transition＞过渡动画导致固定定位的组件会跳一下
最新发布
qq_43664120的博客
08-15 374
如果fixed的元素的父级元素有任意一个的 transform、perspective、filter 或 backdrop-filter不为空，则会基于这个容器而定位，而不是浏览器窗口了。开始先父元素的static静态定位，后面在固定定位会导致该组件会跳动一下。解决办法：给父元素设置 transform: none。
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
qq_48687155的博客
07-26 1171
掌握vant组件库的使用-找组件,引组件,用组件能够对vant组件自带样式进行覆盖自定义遇到重复的标签,自己也封装了一个复用的组件掌握查询文档和使用每个属性的方式。
vue2.0 - layout组件（五）SideBar和Main页面布局
sqLeiQ的博客
06-16 2153
vue2.0 Layout组件
vue 使用 transition 做页面过渡切换时引起的 position 定位问题
qq_44765926的博客
10-19 1877
vue 使用 transition 做页面过渡切换时引起的 position 定位问题 vue项目 home 页面的 <router-view /> 使用了 transition 包裹起来做过渡效果的页面切换，当切换到 info 页面，如图： home页面 <template> <div id="app"> <div class="main"> <transition :enter-active-class="currentCl
Vue之transition动画
Radom&7
11-08 621
demo: &amp;lt;template&amp;gt; &amp;lt;div id=&quot;root&quot;&amp;gt; &amp;lt;div&amp;gt; &amp;lt;router-link to=&quot;/home&quot;&amp;gt;首页 \&amp;lt;/router-link&amp;gt; &amp;l
解决transition第一次不生效问题和fixed的transform定位问题
qq_39537116的博客
01-07 8984
left设置初始值,设置初始transition; 如果设置fixed元素的父级或祖先级元素设置为transform属性，则fixed相对于该元素定位。因为设置transform属性的元素建立了一个新的坐标系        ...如果要通过fixed实现铺满全屏的效果，一定要注意其父级或祖先级元素不能设置有transform属性...
vue-rooter基础篇
AK的博客
09-03 4679
路由概述 vue-rooter 是 vue.js 官方的路由插件，他和 vue.js 是深度集成的。适用于构建单页面。vue 的单页面应用是基于路由和组件的，路由是用于设定访问路径，并将路径和组件映射起来。在 vue-rooter 单页面应用中，是路径之间的切换，也就是组件的切换。 路由的使用 1.使用 router-link 标签进行导航，to 属性表示指定的链接，rooter-link标签会被渲染成 a 标签。路由匹配的组件在 router-view 中渲染出来。 router-link to： to
【css】关于transform的fixed定位失效问题
热门推荐
汪小穆的博客
05-04 1万+
前言：发现一个很有趣的关于transform的bug。 一、问题起始： ①、要弄一个侧边展开栏，我是直接给body添加一个transform:translateX(80%);的样式，让body整体往左移了80%的距离 ②、然后点击侧边展开栏再给body添加一个transform:translateX(0);的样式，让他回到原来位置。 ③、整体的效果实现并没有问题。 ④、但是fixed定位...
transform对定位的影响/fixed失效
zoey的博客
07-06 1665
场景： 元素fixed定位，始终位于视口某一个位置，但是并没有按照预想实现固定定位，最后查到问题是transform引起的；根据w3c的解释是transform会创建新的包含块，fixed以及absolute都会以改元素定位； position:fixed在遇到有transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级,表现为相对于该元素绝对定位 position:absolute在遇到transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级 fixed定位失
fixed固定定位transofrm失效的解决
m0_74359467的博客
04-11 643
将 content 元素设置为绝对定位，并将其四个边距都设为 0，以使其占据整个父容器的空间。然后，我们在该元素内部再创建一个 div 元素，并将其设置为绝对定位，同时使用 translate 属性将其水平和垂直居中。将 content 元素设置为绝对定位，同时使用 flexbox 布局将其内部的元素水平和垂直居中。具体来说，我们将该元素的 display 属性设为 flex，然后使用 align-items 属性将其垂直居中，使用 justify-content 属性将其水平居中。
transform导致的fixed固定定位失效
cici_bigchild的博客
10-10 1132
项目里需要做一个在容器内全屏的功能，screenfull不满足，他只能浏览器全屏（可能是我不会用，求大神指导）。在transform不为none的元素中，定位是会受到影响的。1、父元素及其祖先元素如果使用了transform，则使用fixed定位将会失效，某些效果的实现可以使用sticky来代替。2、同样在被影响的元素上做transform。（试了有用，但是这个位置的计算我把控不了，不适用我的项目）3、最后决定剑走偏锋，在不影响布局的情况下，可以直接把要定位的元素移动到body下。
css3的transform属性会限制position:fixed的跟随效果，导致fixed定位失效
song527002517的博客
07-31 1470
position:fixed是相对于浏览器窗口生成的固定定位，可以让元素不跟随浏览器的滚动条而滚动。但是当父元素的css加了个transform属性值，原本应该固定在窗口上的fixed元素就会失效，变成跟着滚动条滚动了。 ...
css 常用操作
Bonrui编程路
01-12 5077
transform限制position:fixed的跟随效果 元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动， 但是transform可以把position:fixed干掉让其降级成absolute。 如下面代码： 本身应该不动的图片因为父级设置了transform而变成了absolute的效果。 更多transform影响css的介绍请参考：
Vue中使用JSX语法实战与比较
"在Vue中使用JSX语法的实践与理解" 在Vue.js框架中，开发者通常使用模板语法来构建用户界面，但有时为了与其他框架（如React）保持一致性或在特定复杂场景下提高灵活性，可能会选择使用JSX（JavaScript XML）。本篇...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值