4

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

假设我有一个菜单：

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

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

这是我要实现的目标的简化示例。第一个菜单是需要转换的菜单，第二个菜单只是为了显示这个内容量的自动宽度。

问题

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

menu {
    width: 50px;
}

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

问题是，当您设置width为auto两者之一时会发生：

  • 浏览器从固定宽度 0 (Chrome) 开始动画 - 如果我们再添加min-width它，它会在下一个
  • 浏览器不会为任何东西设置动画只是应用新样式
4

1 回答 1

3

您可以利用这个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属性，而不是转换宽度，您可以更轻松地将其设置为固定值，这一切都是因为它只会在达到此限制时才开始使用，并且在此之前保持不可见。

于 2013-07-09T14:17:54.393 回答