转换webkit-transition时，使用width:auto时出现异常。

Question

我有一个侧边导航，采用标准的<ul><li><a></a></li></ul>格式，使用overflow hidden截断链接的完整文本。在悬停1秒后，我希望锚点扩展宽度，显示链接的完整文本。

我已经完全在CSS中实现了这个功能，但是遇到了异常情况： 当:hover时，我将锚点的宽度设置为自动。触发1秒延迟后，锚点的宽度突然变为0，然后才扩展到其完整宽度。

以下是我的CSS代码，您可以在此处查看我的当前代码： http://eventfeedstl.com/day/07182011/

.day .sidebar{
    width: 200px;   
    }
.day .sidebar ul {
    list-style: none;
    padding: 0;
    margin:0;
    position: absolute;
    width: auto;
    }
.day .sidebar ul li{
    border-bottom: 1px solid #626666;
    display: relative;
    width: 200px;
        }
.day .sidebar ul li:hover{
    width: auto;
        }
.day .sidebar ul li a{
    font-weight: normal;
    font-size: .8em;
    color: #f2f2f2;
    display: block;
    width: auto;
    padding: 4px 5px;
    background: none;
    width: 190px;
    height: 10px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    -webkit-transition: background 1.3s ease-out;
    -moz-transition: background 1.3s ease-out;
        transition: background-color 1.3s ease-out; 
        }

.day .sidebar ul li a:hover {
    background: #797979;
    -webkit-transition: background 0.15s;
    -moz-transition: background 0.15s;
        transition: background 0.15s;
        text-decoration: none;
    width: auto;
       -webkit-transition-property:width;
       -webkit-transition-delay:1s;
        position: relative;
    }       

- Rampant Creative Group

Answer 1

你正在覆盖背景和宽度之间的过渡效果，这可能会导致问题。有一种设置多个过渡的方法，但我相当确定这种方式会引起问题。

但是

一般来说，过渡到auto并不起作用。在这些情况下，我喜欢使用min-width和max-width来近似实现效果。

- Paul Irish

---

谢谢Paul，这很有帮助。我会尝试调整最小/最大宽度，看看能否在没有背景转换的情况下实现效果。 - Rampant Creative Group

太棒了！非常整洁的技巧！+✓ - abernier

Answer 2

在特定宽度和自适应宽度之间切换的解决方案： 使width：auto；过渡效果可靠工作的唯一方法是使用Javascript显式设置项目的宽度。我知道这违背了使用CSS过渡效果的初衷，但以下是我让它工作的方式：

$(".author").each(function() {
  $(this).width( $(this).width() );
});

然后在 CSS 中。

.author:hover { width: 200px; !important }

编辑：这里有一个纯CSS的解决方案，可以在0和auto之间切换：CSS过渡对于百分比高度不起作用?

- cemregr