CSS3 FlexBox转换

问题描述

在此程式码范例中：我创建了三个flexbox。我想要的效果是，当一个鼠标悬停在中间框，它的大小（演示中的颜色变化只是为了帮助我知道悬停）。

在FireFox v19这几乎工作正常。但是它选择动画的开始和结束宽度是奇怪的。

在Chrome v25中，我得到快速不稳定的状态振荡（闪烁）。

在IE10中，我得到与FireFox相同的转换，但没有平滑的转换。

解决方案

我修复了。立即查看。 / p>

In this codepen example: http://codepen.io/DrYSG/pen/ovctn I created three flexboxes. The effect I want is that when one hovers over the middle box, it grows in size (color change in the demo is just to help me know about the hover).

In FireFox v19 this almost works correctly. But it is strange what it picks of the start and end widths of the animation.

In Chrome v25, I am getting rapid unstable oscillation of states (flashing). Really not correct.

In IE10 I get the same transition as FireFox, but no smooth transition.

解决方案

I fixed it. Take a look at the http://codepen.io/DrYSG/pen/ovctn now.

这篇关于CSS3 FlexBox转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！