css3 transition控制opacity显示的时候，其他元素会出现模糊的效果

Question

codePen演示地址

https://codepen.io/kuckboy/pen/rzbbdR

说明

1. codePen中js前470行是我写的插件，后面的是调用的代码。
2. 主要是操作了opacity属性从0到1，从1到0。不知道问题出在哪里了。。。。

具体操作

点击展开和收起的时候，动画会出现模糊和偏移。

猜想

1. 是否是前面的元素盖在上面，变化的时候，变模糊了？。。。
2. 难道要使用transform3d，类似启用硬件加速？？？？。。 尝试改成transform3d(,,0)之后，文字就一直很糊。
3. 在chrome控制台中（Rendering->Enable paint flashing）可以看到,没有控制的其他元素也发生了变化。

求助

I need help.

Answer 1

top/left 变化会导致重排（ reflow/relayout ）。
因为你使用了 transition: all 1s linear; 这个重排的过程被放慢了，所以你看到了“偏移”。

Answer 2

你这个有意思。。点上边那个按钮，左下角那个也动。。你还是把css拿出来写吧。。

Answer 3

偏移没看出来，模糊是因为transform的问题，参考下这篇文章transform

Answer 4

楼主你这个问题解决了没有？我也遇到这个问题了