在过渡中将未知项目的宽度设置为全宽
提问于 2014-08-09 18:49:29
我有span元素。在它里面我有一个未知数量的小的16x16图像。这一切都在一行之内。
如果我将width设置为auto，它会正确地采用它的全宽。
事情是这样的，我想做一个过渡。所以我将宽度设置为10px。然后在悬停时我将其设置为100%，这是不好的，因为它占用了父容器的100%的宽度。所以我想将它设置为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)？也许能行得通？
编辑:计算自动不起作用：http://jsfiddle.net/q37ek3nx/
回答 1
Stack Overflow用户
发布于 2014-08-09 19:44:21
做到这一点的唯一方法是在max-width上使用转换。在悬停时，您必须始终应用大于最大值的with。与实际宽度的差异越大，过渡就会越快。
演示：http://jsfiddle.net/q37ek3nx/3/
它并不完美，如果知道这个宽度可以达到的某些限制，那就太好了，但是它可以工作，而且它仍然是纯CSS。否则，您应该使用JS，因为转换scaleX (“转换为自动”的唯一另一种方法)不会得到您想要的行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25221904
复制相关文章
![eclipse设置中没有server选项[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/7fe4c89b70274db70b8d423c73ba7134.png)
点击加载更多
腾讯云开发者
