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

补充: 是指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]逃~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

css垂直居中怎么设置?文字上下居中和图片垂直居中

  css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题。垂直居中又分为css文字上下居中和css图片垂直居中...

2616
来自专栏深度学习之tensorflow实战篇

Python基础整理操作积累

Python编程积累 列表内容 Python基础 for变化量的灵活应用 for x,y in [[0,1],[0,2],[1,2]]: d...

32810
来自专栏十月梦想

文本阴影和边框阴影

    box-shadow:left top 模糊距离 阴影尺寸 阴影颜色 inset(内阴影);

762
来自专栏hbbliyong

RadioButtonList数据项不改变依然执行改变事件

问题:使用RadioButtonList导航到其他页面,当点击一数据项出现新页时候,关闭新页,再点击此数据项,由于数据项没有改变,所以不能触发他的Selecte...

2383
来自专栏用户画像

H5中的标记方法

要使用H5标记,必须先进行如下的doctype声明,不区分大小写。Web浏览器通过判断文件开头有没有这个声明,来判断解析器和渲染类型是否切换到对应的H5模式。

651
来自专栏WD学习记录

html5学习笔记(二)

1. min、max、step属性用于包含数字或日期的input类型规定限定(约束)。

411
来自专栏程序猿的那些趣事

H5学习从0到1-H5的块标签的使用(9)

413
来自专栏coding

v-if与v-show实例

1234
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

601
来自专栏十月梦想

html元素居中情况分类

内联元素,也叫行内元素(inline):(,a,input,span,b,i,u....)默认不会进行换行,不能设置宽度和高度.

443

扫码关注云+社区