2013-02-25 3 views
4

이 코드 예제에서 : http://codepen.io/DrYSG/pen/ovctn 3 개의 플렉스 박스를 만들었습니다. 내가 원하는 효과는 가운데 상자를 가리키면 크기가 커집니다 (데모의 색상 변경은 커서가 호버에 대해 알 수 있도록 도와줍니다).CSS3 FlexBox 전환

FireFox v19에서는 거의 제대로 작동합니다. 그러나 그것은 애니메이션의 시작과 끝 폭을 선택하는 것이 이상합니다.

Chrome v25에서 불안정한 불안정한 진동이 발생합니다 (깜박임). 정말 잘못되었습니다.

IE10에서는 FireFox와 동일한 전환이 발생하지만 원활한 전환은 발생하지 않습니다.

+3

FF 나 Opera에서 할 수있는 일이 많지 않다고 생각합니다. 여기에는 대략 비슷한 행동이 있습니다. 나는'.fixed'에 대한 디폴트 상태에서'min-width : 400px'를 시도했으나, hover 상태를 떠나기위한 크기 변경 애니메이션은 작동을 멈췄습니다. Chrome의 일부 접두사가 누락되었습니다. http://codepen.io/cimmanon/pen/CBEnK. 나는 IE에 당신을 도울 수 없다. – cimmanon

답변

3

해결했습니다. 지금은 http://codepen.io/DrYSG/pen/ovctn을보세요.

+0

IE10에서 부드럽게 전환되는 행운? –

+1

IE11을 사용해 보았지만 여전히 애니메이션이 아닌 움직임입니다. 이 솔루션을 포크하여 결과를 얻을 수 있는지 확인할 수 있습니다. –

+1

분/최대 너비가 추가되어 IE11에서 잘 보입니다. http://codepen.io/anon/pen/HiwdL – simoncereska