探究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 条评论
登录 后参与评论

相关文章

来自专栏QQ音乐技术团队的专栏

iOS 视图,动画渲染机制探究

终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,...

4509
来自专栏IMWeb前端团队

[小技巧]巧妙使用flex, letter-spacing实现过渡动画

本文作者:IMWeb DeepKolos 原文出处:IMWeb社区 未经同意,禁止转载 巧妙利用flex, 实现下面的效果~ 无需js来获取clien...

1997
来自专栏腾讯社交用户体验设计

SVG fallback 及可读性

1413
来自专栏黄Java的地盘

动态生成DOM元素的高度及行数获取与计算方法

在开发IM的项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度的DOM元素都是动态生成的,我们无法在数据渲染前获取...

2242
来自专栏GreenLeaves

web前端优化之reflow(减少页面的回流)

1、什么是reflow? reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom...

2517
来自专栏Java帮帮-微信公众号-技术文章全总结

Web前端工程师2016必学的四大核心技能

1.HTML5(结构层) HTML超文本标记语言是结构层,是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。它是学习前端开发的基础语言,要重点学习H5...

2993
来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第五篇

接着上节的继续学习,在本章中,我们将结束游戏《外星人入侵》的开发。我们将添加一个Play按钮,用于根据需要启动游戏以及在游戏结束后重启游戏。我们还将修改这个游戏...

3318
来自专栏Coco的专栏

使用 position:sticky 实现粘性布局

2924
来自专栏吴老师移动开发

【iOS开发】我是这样封装view的前言示例关于扩展

一个有经验的开发,碰到一些特殊的UI控件,脑海中应该是有好几种实现方案的,同时也能记起一些第三方相似的开源控件。为了应对产品的需求变更,UI效果的变更,以及做到...

1451
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

4495

扫码关注云+社区

领取腾讯云代金券