1

我有一个标准的嵌套 UL 导航结构和一些 CSS 来为子导航设置动画:hover......

看到这个小提琴：http: //jsfiddle.net/5kwsV/

除了最深 UL 上的动画外，一切都按预期工作。第一个子导航动画高度，第二个应该只动画宽度。

这是处理我遇到问题的最深 UL 动画的代码。

nav ul li > ul > li > ul {
    position: absolute;
    display: block;
    visibility: hidden;
    width: 0px;
    height: auto;
    top: 0;
    left: 100px;
    padding: 0;
    margin: 0;
    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
         -o-transition: all 0.6s ease;
        transition: all 0.6s ease;
}

nav ul li > ul > li:hover > ul {
    position: absolute;
    display: block;
    visibility: visible;
    width: 100px;
    height: auto;
    top: 0;
    left: 100px;
    padding: 0;
    margin: 0;
    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
         -o-transition: all 0.6s ease;
        transition: all 0.6s ease;
}

现在，上述代码的问题在于，当将鼠标悬停在“Michael”导航标签上时，宽度和高度会产生动画。它只需要为宽度设置动画。看起来解决方案相当明显，将“全部”更改为“宽度”。

我改变这个...

    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
         -o-transition: all 0.6s ease;
        transition: all 0.6s ease;

对此...

    -webkit-transition: width 0.6s ease;
       -moz-transition: width 0.6s ease;
        -ms-transition: width 0.6s ease;
         -o-transition: width 0.6s ease;
        transition: width 0.6s ease;

现在，当悬停时，动画的动画宽度应该是 0 到 100px。新问题是当我移动到不同的导航标签时，它应该从 100px 动画回到 0px，但它只是在那里闪烁。

我错过了什么？我这辈子都看不到它，我敢肯定它很明显！

4

1 回答 1

3

您也在转换背景属性。这并不明显，因为它是在祖先中声明的，并且只是被继承的。当您悬停时，背景会立即发生变化，并且您会看到宽度的过渡。当您将鼠标悬停时，背景会立即更改，并且您看不到宽度过渡。

你应该做：

transition-property: background, width;
transition-duration: 0.6s;
transition-timing-function: ease;

当然，带有所有供应商前缀。

您的代码很难调试，因为您重复了许多不需要的属性。当属性与基本状态相同时，不要在悬停状态中声明属性，这是无用的，并且更难发现真正的变化。（只是一个建议，希望你不介意:-)

更新的演示

于 2013-05-10T20:49:29.890 回答