探究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]逃~