宽度从固定尺寸过渡到“自动"宽度.使用不带Javascript的CSS [英] Width transitioning from fixed size to "auto" using CSS without Javascript

问题描述

对于将最初设置为固定宽度的元素进行无脚本的仅CSS动画过渡时，我遇到了一些问题，应根据其内容将鼠标扩展到自动宽度.当鼠标熄灭时，它应该折叠回固定的宽度.

假设我有一个菜单:

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

最初，它将显示为折叠的50px宽的垂直栏，仅带有图标.当鼠标悬停在其上时，将显示图标标签.

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

问题

这只是整个CSS的一部分，在这里起着重要的作用:

menu {
    width: 50px;
}

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

问题在于，当您将width设置为auto时，会发生以下两种情况之一:

• 浏览器从固定宽度0(Chrome)开始设置动画-如果我们再添加min-width，则下一个动画会出现
• 浏览器不设置任何动画效果，仅应用新样式

解决方案

您可以利用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属性，您可以将其设置为更容易的固定值，这是因为只有在达到此限制时才会使用该属性，并且该属性一直不可见，直到然后.

I'm having a bit of a problem making script-less CSS-only animated transition of an element that's initially set to a fixed width and should expand on mouse over to auto width according to content in it. When mouse goes out it should collapse back to fixed width.

Let's say I have a menu:

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

Initially it would display as a collapsed 50px wide vertical bar with icons only. When one mouses over it reveals icon labels.

This is a simplified example of what I'm trying to achieve. First menu is the one that needs to transition and second one is there just to show what auto width should be for this amount of content.

Problem

This is just part of the whole CSS that plays an important role here:

menu {
    width: 50px;
}

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

The problem is that when you set width to auto one of the two will happen:

• Browser animates from fixed width 0 (Chrome) - if we then add min-width it does next one
• Browser doesn't animate anything just applies new style

解决方案

You can make use of the max-width trick, it's not perfect, but it gets around the problems with transitioning a numeric value to a string state:

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

(the above has been updated with float:left)

The downside to this method is that you have to set a max width for your menu, but then I usually find that this is a good thing to do anyway.

markup:

<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;
}

Example of seperate dimensions for multilingual:

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

So instead of transitioning the width, you are actually modifying the max-width property, which you can set a fixed value to more easily, all because it will only come into use when this limit has been reached, and remains invisible until then.

这篇关于宽度从固定尺寸过渡到“自动"宽度.使用不带Javascript的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！