2

我正在尝试在我的 css 下拉菜单中添加一些过渡效果，但是无论我将过渡代码放在哪里，它似乎都不起作用。

transition: all 2s ease-in;

我试图让过渡在实际下拉 ul 的父 li 悬停时淡入淡出，这样事件就不会突然发生。

jsfiddle：http: //jsfiddle.net/JazParkyn/6jshy/5/

4

4 回答 4

5

您无法转换该display属性。尝试使用opacity您的下拉菜单。

nav ul ul {
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    -ms-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
}
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

见演示。

于 2013-05-14T14:43:34.507 回答
0

fiddle :here

you have misplaced the transition. It needs to be on nav ul li to activate. Aslo you migh missed some webkits which i added for you.

//update

于 2013-05-14T14:41:16.900 回答
0

您不能转换display，使用visibilityandopacity代替：

nav ul ul {
    visibility: hidden; /* fallback for old browsers */
    opacity: 0;
    transition: all 2s ease-in;
}

nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}

这是一个演示。

如果您希望转换仅适用于opacity，则还需要指定visibility，这使得它有点复杂：

nav ul ul {
    visibility: hidden;
    opacity: 0;
    transition: opacity 2s 0s ease-in, visibility 0s 2s;
}

nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s 0s ease-in, visibility 0s 0s;
}

这是一个演示。

于 2013-05-14T14:43:25.503 回答
0

小提琴：在这里

我已经添加了效果a:hover和下拉菜单，您可以更改延迟等...

于 2013-05-14T14:43:34.400 回答