Переходный пиксель к проценту

Question

Я хотел бы сделать переход с использованием CSS, но размеры моего элемента в пикселях обычно, но в процентах во время события :hover, и переход не работает так. Вы знаете какой-либо способ сделать это?

Answer 1

Возможно, вам придется использовать JavaScript для изменения процентного значения в пикселях после его расчета. Я думаю, webkit сообщает размеры в px независимо от того, как они были установлены при вызове через JavaScript.

Answer 2

Это работает просто отлично - http://jsfiddle.net/eCxQP/

Нормальная ширина - в пикселях, парение - в процентах

body { 
    width: 100%; 
} 


div { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 2s; 
    -moz-transition:width 2s; /* Firefox 4 */ 
    -webkit-transition:width 2s; /* Safari and Chrome */ 
    -o-transition:width 2s; /* Opera */ 
} 

div:hover { 
    width:33%; 
} 

UPDATE: работы в FF, а не Webkit браузеры

Answer 3

Я отлично работает на Firefox, но не на Chromium, для которого вам нужно использовать один и тот же блок.

Answer 4

Вы можете применить переход от ширины% и просто использовать мин-ширина в рх фиксированное значение.

.elem { 
    min-width:50px; /* min-width as the pixel value */ 
    width:0%; /* width as the % value */ 
    transition:width .8s ease; /* transition applied to width */ 
} 
.apply-new-width { 
    width:100% !important; 
} 

Будьте осторожны мин-ширина сильнее, чем ширина . Поэтому, когда вы примените новую ширину (в%), min-width все равно переопределит ее. У вас есть несколько вариантов для этого: увеличьте .apply-new-width specificity (например: .elem.apply-new-width или div.apply-new-width) или используйте важное правило. Обычно важно, это плохое решение, но здесь он делает трюк.

Настоящий пример: jsfiddle. Она работает во всех браузерах, за исключением, конечно, в IE, где переходы не поддерживаются, но изящно деградирует, поэтому мы можем сказать, что это работает, где каждый :)

Приветствия