Переход пикселя в процент - PullRequest
Новая
       33

Переход пикселя в процент

3 голосов
/ 23 января 2012

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

Ответы [ 5 ]

12 голосов
/ 16 января 2013

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

.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 специфичность (например: .elem.apply-new-width или div.apply-new-width) или использовать правило! Important. Обычно! Важный - это плохое решение, но здесь оно делает свое дело.

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

Приветствия

4 голосов
/ 23 января 2012

Работает просто отлично - 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%;
 }

ОБНОВЛЕНИЕ: работает в FF, а не в браузерах на основе Webkit

2 голосов
/ 23 января 2012

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

1 голос
/ 28 марта 2018

Я знаю, что это очень старая версия, но если ваша поддержка IE9 и выше, вы можете сделать что-то вроде этого ...

В Css 

div{ width:100%; transition: width .2s ease;}
div.set-px-width { width: calc(0% + 50px); }

В JS 

div.className += "set-px-width"

Приведенное выше будет переходить от ширины 100% к ширине 50px при использовании calc с процентом 0. Это, похоже, по-прежнему будет обрабатывать ширину как процент и будет соответствующим образом переходить

1 голос
/ 23 января 2012

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

...