css - 将未知元素的宽度设置为过渡时的全宽

Question

我有 span 元素。其中我有数量未知的 16x16 小图像。全部在一行中。

如果我将宽度设置为自动，它会正确地使用它的全宽。

不过，我想做一个过渡。所以我将宽度设置为 10px。然后在悬停时我将它设置为 100%，这很糟糕，因为它占用了 hte 父容器宽度的 100%。所以我想将它设置为 auto 但它没有动画。有针对这个的解决方法吗？ fiddle :将鼠标悬停在右侧的浅蓝色 block 上，其中包含三个红色框:http://jsfiddle.net/q37ek3nx/4/

上面的 fiddle 链接。

fiddle 片段:

<div>
    <span>
        <span class="img"></span>
        <span class="img"></span>
        <span class="img"></span>
    </span>
</div>
<style>
* {
    padding: 0;
    margin: 0;
}
div {
    background-color: midnightblue;
    text-align: right;
}

div > span {
    background-color: steelblue;
    height: 100%;
    width: 30px;
    transition: width 1s;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

div > span:hover {
    width: 100%;
}

.img {
    width: 16px;
    height: 16px;
    outline: 1px solid red;
    display: inline-block;
}
</style>

编辑:我想将它设置为 width: calc(auto) 吗？也许会奏效？

编辑:自动计算不起作用:http://jsfiddle.net/q37ek3nx/

Answer 1

唯一的方法是在 max-width 上使用过渡。在悬停时，你必须应用一个总是比最大​​可能更大的。与实际宽度的差异越大，过渡越快。

演示:http://jsfiddle.net/q37ek3nx/3/

它并不完美，如果知道此宽度可能达到的某些限制会很棒，但它可以工作并且仍然是纯 CSS。否则你应该使用 JS，因为转换 scaleX(“转换为自动”的唯一其他方式)不会得到你想要的行为。