将像素过渡到百分比

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

更新：在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; 
} 

要当心最小宽度要强于宽度。所以当你应用新的宽度（以％为单位）时，最小宽度仍然会覆盖它。你有几个选择来处理这个问题：增加.apply-new-width specificity（eg：.elem.apply-new-width或者div.apply-new-width）或者使用！important规则。通常，重要的是一个不好的解决方案，但它在这里诀窍。

下面是一个工作例子的jsfiddle。它可以在所有的浏览器，除了IE当然，其中的转变，不支持的，但它缓慢下降，所以我们可以说，它的工作原理每一个地方:)

干杯