Question

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

除了最深的UL上的动画外，一切都按预期工作。第一个subnav为高度设置动画，第二个subnav应该仅设置宽度。

这是处理我遇到问题的最深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，但它只是闪烁在那里。

我错过了什么？不能为我的生活看到它，我肯定它的东西是愚蠢明显的！

Answer 1

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

你应该这样做：

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

当然还有所有供应商前缀。

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

updated demo

CSS动画导航元素：悬停

1 个答案: