Question

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

如果我将宽度设置为自动，则会正确显示其宽度。

但是，事情是，我想做一个过渡。所以我将宽度设置为10px。然后在悬停时我将其设置为100％，这很糟糕，因为它需要100％的hte父容器宽度。所以我想把它设置为auto，但它没有动画。这个问题有方法解决吗？小提琴：鼠标悬停在右侧的浅蓝色块中，其中有三个红色框：http://jsfiddle.net/q37ek3nx/4/

上面的小提琴链接。

小提琴片段：

<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)？也许会奏效？

编辑：calc auto无效：http://jsfiddle.net/q37ek3nx/

Answer 1

执行此操作的唯一方法是在max-width上使用转场。在悬停时，你必须使用比最大可能更大的值。与实际宽度的差异越大，转换的速度就越快。

DEMO：http://jsfiddle.net/q37ek3nx/3/

它并不完美，知道这个宽度可以达到的某些限制会很棒，但它有效并且它仍然是纯CSS。否则你应该使用JS，因为过渡scaleX（唯一的另一种方式转换为＆＃34;过渡到auto＆＃34;）将无法获得你想要的行为。

在转换中将未知项的宽度设置为其全宽

1 个答案: