백분율로 픽셀 전환

Question

CSS를 사용하여 전환을 수행하고 싶지만 :hover 이벤트가 진행되는 동안 요소의 크기는 픽셀 단위이지만 일반적으로 백분율입니다. 전환은 이와 같이 작동하지 않습니다. 이 일을하는 방법을 알고 있습니까?

Answer 1

JavaScript를 사용하여 백분율 값을 계산 한 후에 픽셀로 변경해야 할 수 있습니다. Webkit은 JavaScript를 통해 호출 될 때 설정 방법에 관계없이 px로 차원을보고합니다.

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의 작품이 아니라 웹킷 기반 브라우저

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; } 

는 자르되기. 그래서 새로운 너비 (% 단위)를 적용하면 분 너비가 여전히 무시됩니다. 이를 처리 할 수있는 몇 가지 옵션이 있습니다 : .apply-new-width specificity (예 : .elem.apply-new-width 또는 div.apply-new-width)을 늘리거나! important 규칙을 사용하십시오. 일반적으로 중요한 것은 나쁜 해결책이지만 여기서는 속임수를 사용합니다.

작동 예제는 jsfiddle입니다. 이 전환은 지원되지 않습니다 IE에서 당연히 제외하고, 모든 브라우저에서 작동하지만, 정상적으로 그래서 우리는 :)

건배