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"nav标签上时，宽度和高度会动起来。它只需要动画宽度。解决办法似乎很明显，把"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到100px。新的问题是，当我移动到一个不同的导航标签时，它应该从100px动画回到0px，但它只是在那里闪烁。

我错过了什么?我怎么也看不出来，我敢肯定这是很明显的东西!

Answer 1

您还在过渡背景属性。这并不明显，因为它是在祖先中声明的，只是被继承。当您悬停时，背景立即改变，并且您可以看到宽度的过渡。当你把鼠标悬停时，背景会立即改变，你看不到宽度的过渡。

你应该这样做:

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

和所有供应商的前缀，当然。

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

更新演示