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

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

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

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

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

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

.r-image {
   
  .container {
   
    width: 100%;
    // height: calc(100% - 1
最低0.47元/天 解锁文章
前端李小白
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0 中使用transition实现动画效果使用心得
10-18
在Vue2.0中，`<transition>`组件是实现动态过渡效果的关键工具，它允许我们在DOM更新时添加平滑的过渡效果。这篇文章将深入探讨如何使用`<transition>`实现动画效果，通过四个实践案例帮助理解其核心概念。 **1. ...
vue 组件中使用 transition 和 transition-group实现过渡动画
10-16
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，...
vue transition动画 fixed定位初始化错乱
暖光的博客
04-05 2152
vue组件切换动画 但fixed定位会导致页面初始化错乱一下，有解决办法欢迎交流 <transition :name="$store.state.global.EXCESSIVE"> <router-view/> </transition> .slide-right-enter-active, ....
关于transition动画下，如果有fixed元素，渲染的奇葩问题
weixin_34290000的博客
03-26 710
之前我们机票页面有生成一个低价日历，然后我们有一个需求就是滚动到那个月份，对应显示这个月，然后这个区域是fixed定位的，然后奇怪的事情发生了，就是低价日历的动画执行完后，修改页面的html却没有正常更新。（因为那个区域显示有点问题，我截图的地方也是fixed元素）然后大家可以看到以上截图，改变了dom后页面没有重新渲染（可以这里用词有误，反正是没有渲染正常。） 然后我就找了小钗（http:/...
vue van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决
sinat_42888557的博客
04-20 1834
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 使用 transition 做页面过渡切换时引起的 position 定位问题
qq_44765926的博客
10-19 1630
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 502
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
vue3.x中使用cesium，vue3.x+Cesium
05-04
以下是关于在Vue3.x中使用Cesium的知识点： 1. **Vue CLI集成**: 首先，你需要通过Vue CLI创建一个新的项目。执行`vue create my-vue3-cesium-project`命令，然后选择自定义配置，这将允许你手动调整项目结构和配置...
解决transition第一次不生效问题和fixed的transform定位问题
qq_39537116的博客
01-07 8858
left设置初始值,设置初始transition; 如果设置fixed元素的父级或祖先级元素设置为transform属性，则fixed相对于该元素定位。因为设置transform属性的元素建立了一个新的坐标系        ...如果要通过fixed实现铺满全屏的效果，一定要注意其父级或祖先级元素不能设置有transform属性...
vue-rooter基础篇
AK的博客
09-03 4565
路由概述 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定位失效
随风丶逆风的博客
02-20 1438
在使用第三方sdk时，偶遇一个小问题，遂记录一下。 问题现象 第三方sdk提供了渲染功能和操作按钮，因为业务场景的原因，需要改变这些按钮的样式和位置。 我啪的一下，很快啊。直接f12，鼠标选中dom节点，查看class名字，使用important直接覆盖样式。但是它不讲武德，大小形状颜色都变了，fixed定位咋没生效呢。 于是又啪的一下，打开了styles查看，发现fixed实际已经生效了。遂开始面向谷歌编程。 问题原因 父节点的样式中如果transform属性不为none，就会修改fixed的上文基准位置
vue——el-table固定列 fixed
wy313622821的博客
05-16 3844
我们要实现如下图的效果： 将操作列固定在右侧 在列中 加: fixed="right" <el-table-column label="操作" width="160" fixed="right"> <template slot-scope="scope"> <router-link :to="'/order/save/'+scope.row.id"> <el-button type="
transform对定位的影响/fixed失效
zoey的博客
07-06 1578
场景： 元素fixed定位，始终位于视口某一个位置，但是并没有按照预想实现固定定位，最后查到问题是transform引起的；根据w3c的解释是transform会创建新的包含块，fixed以及absolute都会以改元素定位； position:fixed在遇到有transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级,表现为相对于该元素绝对定位 position:absolute在遇到transform祖先元素时，定位的相对对象变为该元素/最近的有定位的父级 fixed定位失
fixed固定定位transofrm失效的解决
最新发布
m0_74359467的博客
04-11 452
将 content 元素设置为绝对定位，并将其四个边距都设为 0，以使其占据整个父容器的空间。然后，我们在该元素内部再创建一个 div 元素，并将其设置为绝对定位，同时使用 translate 属性将其水平和垂直居中。将 content 元素设置为绝对定位，同时使用 flexbox 布局将其内部的元素水平和垂直居中。具体来说，我们将该元素的 display 属性设为 flex，然后使用 align-items 属性将其垂直居中，使用 justify-content 属性将其水平居中。
css 常用操作
Bonrui编程路
01-12 4834
transform限制position:fixed的跟随效果 元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动， 但是transform可以把position:fixed干掉让其降级成absolute。 如下面代码： 本身应该不动的图片因为父级设置了transform而变成了absolute的效果。 更多transform影响css的介绍请参考：
transform属性限制position:fixed的定位效果
Harvey Wang的博客
05-20 6247
　　最近在做项目的过程中需要实现一个导航按钮固定的效果，但是即使在div上加上position:fixed样式，div还是没有固定。怎么尝试都不行。后来前端的同事查了一下资料说可能是弹窗的div中有transform属性导致position:fixed失效了。 　　自己开始查看一下弹窗的div的css样式，在css样式中使用transform: translate(-50%,-50%)来使整个d...
uniapp中uni-transition过渡组件溢出隐藏问题；
zhanghaoplc的博客
10-12 1480
uni-transition过渡组件在使用过程中,slide-top线性划入时,整个过渡块没有做到溢出隐藏; 这时,我们需要为uni-transition标签加上一个父元素; 让他溢出隐藏 <view style="overflow:hidden"> <uni-transition .../> </view> ...
vue组件切换时使用过渡(transition)时应该注意的一些事项
热门推荐
Encorehwang的博客
01-04 2万+
最近在做公司项目时，涉及到做一个问卷调查，需要在不同题目题目之间使用transition产生一个过渡效果：当点击按钮进入下一题时，当前卡片从正中间向左滑动至不可见后，下一题对应的卡片从右边不可见区域从右向左滑动至屏幕正中间，在这个过程中我发现了几个问题，下面是该部分对应的代码<transition :name="slide"> <keep-alive> <component
vue中使用transition-group来动画过渡li之间的切换
05-11
使用 `transition-group` 来实现 `li` 之间的过渡动画，需要注意以下几点： 1. 在 `ul` 标签上添加 `transition-group` 属性，并设置 `tag` 属性为 `li`，表示将 `li` 元素作为过渡的目标； 2. 在 `li` 元素上添加 `key` 属性，用于区分不同的元素； 3. 在 CSS 样式中设置过渡效果。 下面是一个简单的示例代码： ```html <template> <ul v-if="items.length" class="list" v-bind:key="items.length" v-transition-group="'list'"> <li v-for="(item, index) in items" v-bind:key="item.id" class="list-item">{{ item.text }}</li> </ul> </template> <script> export default { data() { return { items: [ { id: 1, text: 'item 1' }, { id: 2, text: 'item 2' }, { id: 3, text: 'item 3' }, ], }; }, }; </script> <style> .list-enter-active, .list-leave-active { transition: all 0.5s ease; } .list-enter, .list-leave-to { opacity: 0; transform: translateY(30px); } </style> ``` 在上面的代码中，`transition-group` 属性绑定了一个字符串 `'list'`，该字符串用于设置 CSS 类名前缀，以便 Vue 自动为过渡效果添加相关的类名，例如 `.list-enter-active`、`.list-leave-active`、`.list-enter` 和 `.list-leave-to` 等类名。 CSS 样式中设置了过渡效果，`.list-enter-active` 和 `.list-leave-active` 表示过渡过程中的样式，`.list-enter` 和 `.list-leave-to` 表示进入和离开的样式，将它们应用到 `opacity` 和 `transform` 属性上，实现了渐变和位移的过渡效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值