补充:是指transform动画
想要的效果
原本buttom_submit是通过position:fixed; bottom:0px;来定位到底部的, 然后结果显示那里做相同高度的padding的 , 所以还原问题配置
但是动画效果是这样的
有兴趣可以到这里改css试试
那么问题来了
所以动画过程中的position:fixed失效了 ? 是不是回归到文档流?
这时候使用Animations工具了 , Chrome Devtools位置:3 dot -> more tools -> Animations , 设置比较慢的速度
动画的时候按下暂停按钮鼠标的位置
然后就是调整设置~~
建议去实地试试~调调各种布局属性
可以从表现上看到
- 修改
bottom的位置是无效的 , 同时修改margin-top也是无效的- 只有增加
bottom/top的属性才会出现这样的 , 后面试了left/right正常 , 并且配合margin也是正常的 , 调节其值也是有效果的- 从
bottom修改为top的表现 , 可以看出这时候的布局是参照所参与transform变换的元素- 还有
postion:fixed会导致一丢丢的垂直位置偏移
这就奇了怪了, position:fixed + top/bottom 才会导致各种布局失效 , left/right 却是正常的 , 怪怪的~~
那么说好的探究捏? 看来是需要真的了解fixed的布局的实现机制了~ 允许我先Google Google~
找到了这篇~CSS3 transform对普通元素的N多渲染影响
还有https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c
我谷歌了一下原来问题2015的时候就被发现了我就当作提供一个debug思路吧 利用
Animations, 摸索差不多再更新个小结[faceplam]逃
