Question

我遇到了一个问题，即无脚本的CSS动画过渡最初设置为固定宽度的元素，并且应该根据其中的内容将鼠标扩展到自动宽度。当鼠标熄灭时，它应该折叠回固定宽度。

假设我有一个菜单：

<menu>
    <li>Item</li>
    <li>Item with long text</li>
</menu>

最初它会显示为折叠的50px宽垂直条，仅带图标。当鼠标悬停在它上面时会显示图标标签。

This is a simplified example我正在努力实现的目标。第一个菜单是需要转换的菜单，第二个菜单是为了显示此内容量的自动宽度。

问题

这只是整个CSS的一部分，在这里发挥了重要作用：

menu {
    width: 50px;
}

menu:hover {
    width: auto; /* setting to other fixed width works as expected */
}

问题在于，当您将width设置为auto时，其中一个会发生：

浏览器动画来自固定宽度0（Chrome） - 如果我们再添加min-width它会做下一个
浏览器不动画任何仅应用新样式的内容

Answer 1

你可以使用max-width技巧，它并不完美，但是它解决了将数值转换为字符串状态的问题：

http://jsfiddle.net/Cqmuf/1/

（以上内容已更新为float:left）

此方法的缺点是您必须为菜单设置最大宽度，但我通常会发现这是一件好事。

<强>标记：

<div class="menu">
  <a href="#">[i] Hello</a>
  <a href="#">[i] There</a>
</div>

<强>的CSS：

div a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

.menu {
  transition: all 2s;
  max-width: 17px;
  /*
   here you can set float:left or position:absolute
   which will force the menu to collapse to it's minimum
   width which, when expanded, will be the actual menu
   item widths and not max-width.
  */
  float: left;
}

.menu:hover {
  /*
   If you have the possibility of varied widths, i.e. multilingual
   then make sure you use a max-width that works for them all. Either
   that or do what a number of multilingual sites do and set a body
   class that states the current language, from there you can then
   tailor your max-width differently e.g. wider for German.
  */
  max-width: 300px;
}

多语言的单独尺寸示例：

.lang-de .menu:hover { max-width: 400px; }
.lang-gb .menu:hover { max-width: 300px; }

因此，您实际上修改了max-width属性，而不是转换宽度，您可以更轻松地设置固定值，因为它只有在达到此限制时才会使用，并且仍然存在直到那时才看不见。

使用CSS而不使用Javascript将宽度从固定大小转换为“自动”

问题

1 个答案: