CSS3 FlexBox轉換

在此codepen示例中：http://codepen.io/DrYSG/pen/ovctn我創建了三個柔性盒。我想要的效果是，當一個人在中間的盒子上移動時，它的大小會增加（演示中的顏色變化只是爲了幫助我瞭解懸停）。CSS3 FlexBox轉換

在FireFox v19中，這幾乎可以正常工作。但奇怪的是動畫的開始和結束寬度。

在Chrome v25中，我正在快速不穩定地振盪狀態（閃爍）。真的不正確。

在IE10中，我獲得了與FireFox相同的轉換，但沒有平滑過渡。

來源

2013-02-25 Dr.YSG

我不認爲你可以爲FF或Opera做很多事情，他們在這裏的行爲大致相同。我確實在'.fixed'的默認狀態下嘗試了'min-width：400px'，但是離開懸停狀態的大小調整動畫停止運行。你只是缺少一些Chrome的前綴：http://codepen.io/cimmanon/pen/CBEnK。我無法幫助您使用IE瀏覽器。 – cimmanon 2013-02-25 22:24:05

我修好了。現在看看http://codepen.io/DrYSG/pen/ovctn。

來源

2013-05-24 16:44:05

在IE10中順利過渡有什麼好運氣？ – 2013-09-30 21:26:59

剛試過IE11，它仍然是一個非動畫的運動。歡迎您提出解決方案並查看是否可以獲得結果。 – 2013-10-02 14:05:09

增加了最小/最大寬度，它在IE11上看起來很好http://codepen.io/anon/pen/HiwdL – simoncereska 2014-01-20 14:41:31

CSS3 FlexBox轉換

回答

相關問題