:hover 上的 CSS 动画导航元素

Question

我有一个标准的嵌套 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”导航标签上时，宽度和高度会产生动画。它只需要为宽度设置动画。看起来解决方案很明显，将“all”更改为“width”。

我改这个...

    -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 到 100 像素。新问题是当我移动到不同的导航标签时，它应该从 100px 动画回到 0px，但它只是在那里闪烁。

我错过了什么？我这辈子都看不到它，我敢肯定它是显而易见的！

Answer 1

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

你应该这样做：

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

当然是所有供应商前缀。

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

updated demo