2013-02-25 3 views
4

В этом примере кода: http://codepen.io/DrYSG/pen/ovctn Я создал три flexboxes. Эффект, который я хочу, заключается в том, что когда человек нависает над средним ящиком, он растет в размере (изменение цвета в демо - это просто, чтобы помочь мне узнать о зависании).Переходы CSS3 FlexBox

В FireFox v19 это почти работает правильно. Но странно, что он выбирает начальную и конечную ширины анимации.

В Chrome v25, я получаю быстрое неустойчивое колебание состояний (мигает). Действительно не правильно.

В IE10 я получаю тот же переход, что и FireFox, но без плавного перехода.

+3

Не думаю, что вы можете много сделать для FF или Opera, здесь они имеют примерно такое же поведение. Я попробовал 'min-width: 400px' в состоянии по умолчанию для' .fixed', но анимация изменения размера для выхода из состояния зависания перестала работать. Вам просто не хватало некоторых префиксов для 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

Смежные вопросы