莫名抖动的调试过程(完整版)
大家看这个浮动的图片哈
我在切换页面的一瞬间注意看
是不是抖一下
我再切换回来也是
看
那碰到这个问题我们怎么去调呢
因为他就是那一瞬间的事
我们没办法去检查这个元素对吧
所以我们可以这样
先把控制台打开
找到这个 Animations
如果没有呢我们就在这点这 moretools
然后 animations 把它点开之后哈
我们先去到别的页面
然后呢我们把速度调慢再进来
大家看现在是不是慢了
我就可以找一个(合适的)时候给他暂停
暂停之后我就可以检查这个元素了
就是这个 class = box
他现在呢就是 position:fixed
我们都知道
这个 fixed 的是基于浏览器窗口定位的
就是这个 top 200现在应该是
距离浏览器顶部到这为200
那我们把它改成0试试
大家看这个0明显就不是浏览器 顶部
而是这个 div 的顶部
为什么这样呢
我们来看一下 position: fixed (的定义)
他最后有一句话说
当元素祖先的这几个属性非空时
容器由视口改为该祖先,也就说
当这个 fixed 的元素
他的父级元素(中)有一个
是这几个属性非空的时候呢
他就会基于那个父极元素去定位
而不是浏览器窗口了
这回我们就不难理解
为什么切换页面他会抖一下
因为切换页面他是有一个动画效果的
我们再把动画加回来
大家看
就是左右滑的这么一个动画效果
所以我们可以推断出来
他应该就是这个动画效果
使用了这个 transform 来实现的
那我们来验证一下哈
我们先来找到这个动画
他用的是 element-ui 里面的
先把这个去掉