莫名抖动的调试过程（完整版）

大家看这个浮动的图片哈

我在切换页面的一瞬间注意看

是不是抖一下

我再切换回来也是

看

那碰到这个问题我们怎么去调呢

因为他就是那一瞬间的事

我们没办法去检查这个元素对吧

所以我们可以这样

先把控制台打开

找到这个 Animations

如果没有呢我们就在这点这 moretools

然后 animations 把它点开之后哈

我们先去到别的页面

然后呢我们把速度调慢再进来

大家看现在是不是慢了

我就可以找一个（合适的）时候给他暂停

暂停之后我就可以检查这个元素了

就是这个 class = box

他现在呢就是 position:fixed

我们都知道

这个 fixed 的是基于浏览器窗口定位的

就是这个 top 200现在应该是

距离浏览器顶部到这为200

那我们把它改成0试试

大家看这个0明显就不是浏览器顶部

而是这个 div 的顶部

为什么这样呢

我们来看一下 position: fixed （的定义）

他最后有一句话说

当元素祖先的这几个属性非空时

容器由视口改为该祖先，也就说

当这个 fixed 的元素

他的父级元素（中）有一个

是这几个属性非空的时候呢

他就会基于那个父极元素去定位

而不是浏览器窗口了

这回我们就不难理解

为什么切换页面他会抖一下

因为切换页面他是有一个动画效果的

我们再把动画加回来

大家看

就是左右滑的这么一个动画效果

所以我们可以推断出来

他应该就是这个动画效果

使用了这个 transform 来实现的

那我们来验证一下哈

我们先来找到这个动画

他用的是 element-ui 里面的

先把这个去掉

好我们再刷新一下

大家看，这回就不会抖了

那如果我们一定要保留这个动画效果

同时呢我们还不想让它抖怎么办呢

我们就要想办法让这个层

就是这个 position: fixed 的这个

这个 div 在dom结构上改变一下

不要放在这个 div 里面了

看一下代码哈

就是这个 div (class-"box")

想办法把它放在body里面

这种需求的话呢

我们就可以考虑封装一个

公用的组件

比如说我们（希望）这样写

InBody

写在 InBody 里面的内容的东西

都会直接被

挂载到 body 那个组件（节点）里面

好那我们来写一下这个组件

其实也很容易

我们先建一个 vue 的文件

在这个目录下哈

那我们就叫

InBody.vue

然后呢我们写一个 vue文件

那这里边呢

我们只需要一个 mounted 的方法

和 destroyed

其他的方法都不要了

然后这里边很简单

一个插槽

然后 mounted 的里面怎么写呢

我们可以通过他的这个方法

拿到他的

dom节点

（我们声明个变量）

我们就叫 node 吧

好，然后呢我们 document.body.appendChild

把这个 node 放进去

好然后呢

destroyed 一样

我们要把它移除掉

node.remove 很简单

好这样这个组件就完事了

那我们可以把这个组件注册到全局

因为这个比较公用

我们先把它导进来啊… 在这吧

components

引爆的有没有

然后呢这个也叫InBody

然后呢我们把它注册到 vue 里 …

他起个名就叫 InBody

然后 InBody

OK

然后我们在这块

就可以这样用了

其他的就不用改了

我们重启一下哈

试一下：切换、回来

然后呢也可以浮动

我们检查一下元素

然后找到这个 box

大家看他现在

就在 body 里面

这样就 OK 了

然后以后在这个项目里

想把什么内容直接放到包的元素下边

可以用这个标签包裹起来就可以了