Question

我想使用CSS进行转换，但我的元素的尺寸通常以像素为单位，但在:hover事件期间以百分比表示，并且转换不会像这样工作。你知道怎么办？

Answer 1

您可以在％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 强于宽度。因此，当您应用新宽度（以％为单位）时，min-width仍会覆盖它。您有几个选项可以处理：增加.apply-new-width specificity（例如：.elem.apply-new-width或div.apply-new-width）或使用！important规则。通常！重要的是一个糟糕的解决方案，但在这里它可以解决问题

这是一个jsfiddle的工作例子。它适用于所有浏览器，当然除了在不支持转换的IE中，但它优雅地降级，所以我们可以说它适用于每个地方：）

干杯

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

在计算完成后，您可能必须使用JavaScript将百分比值更改为像素。我认为webkit报告了px中的维度，无论它们在通过JavaScript调用时是如何设置的。

Answer 5

我知道这已经很老了，但如果你的支持是IE9及以上，你可以做这样的事情......

在Css

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

在JS中

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

通过使用百分比为0的calc，上面将从100％宽度过渡到50px宽度。这似乎仍然将宽度视为百分比并且将适当地转换

将像素转换为百分比

5 个答案: