探究position:fixed在css动画过程中的行为~

本文作者：IMWeb DeepKolos 原文出处：IMWeb社区 未经同意，禁止转载 补充: 是指transform动画

想要的效果

原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, 然后结果显示那里做相同高度的padding的 , 所以还原问题配置

但是动画效果是这样的

有兴趣可以到这里改css试试

那么问题来了

所以动画过程中的position:fixed失效了 ? 是不是回归到文档流?

这时候使用Animations工具了 , Chrome Devtools位置:3 dot -> more tools -> Animations , 设置比较慢的速度

动画的时候按下暂停按钮~鼠标的位置~

然后就是调整设置~~

建议去实地试试~调调各种布局属性

可以从表现上看到

1. 修改bottom的位置是无效的 , 同时修改margin-top也是无效的
2. 只有增加bottom/top的属性才会出现这样的 , 后面试了left/right正常 , 并且配合margin也是正常的 , 调节其值也是有效果的
3. 从bottom修改为top的表现 , 可以看出这时候的布局是参照所参与transform变换的元素
4. 还有postion:fixed会导致一丢丢的垂直位置偏移

这就奇了怪了, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的~~

那么说好的探究捏? 看来是需要真的了解fixed的布局的实现机制了~ 允许我先Google Google~

找到了这篇~CSS3 transform对普通元素的N多渲染影响

还有这篇transform你不知道的那些事

剩下的读者继续谷歌吧~ 我谷歌了一下原来问题2015的时候就被发现了~我就当作提供一个debug思路吧~ 利用Animations , 摸索差不多再更新个小结~faceplam逃~