补充: 是指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多渲染影响
剩下的读者继续谷歌吧~ 我谷歌了一下原来问题2015的时候就被发现了~我就当作提供一个debug思路吧~ 利用
Animations
, 摸索差不多再更新个小结~[faceplam]逃~