Question

我有一个我正在建设的网站供个人使用。这个网站有一个下拉菜单，由CSS3动画制作动画。我非常喜欢结果的外观和感觉，直到我意识到无序列表中的列表项相对于下拉列表的高度不可见/不可见。我寻求的信息是解决这个问题的方法。这非常令人讨厌，特别是考虑到我投入到看似如此简单的事情的时间......

相关CSS：

@keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
} @-webkit-keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
}
.dMaster {
    margin: 0;
    padding: 0;
    text-align: center;
} .dChild {
    margin: 0;
    padding: 0;
    height: 19px;
    width: 60px;
    float: left;
    list-style: none;
} .dChild:hover {
    color: #000;
    background: #C60;
    border: 1px solid #FFF;
    border-top: none;
    text-shadow: 1px 1px 5px #FFF;
} .dMaster2 {
    padding: 0;
    position: absolute;
    min-width: 60px;
    text-align: center;
    background: #C60;
    border: 1px solid #FFF;
    margin: -2px 0  0 -1px;
    visibility: hidden;
} .dChild2 {
    opacity: 0.5;
    padding: 2px 5px;
    list-style: none;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
} .dChild2:hover {
    opacity: 1.0;
} ul li:hover ul {
    color: #FFF;
    visibility: visible;
    animation: dropdown 0.2s ease-out;
    -webkit-animation: dropdown 0.2s ease-out;
}

我尝试了一两个小时，使用了许多不同的技术而无济于事。如果需要，有一个JSFiddle here。任何帮助都非常有用！

旁注：下拉菜单位于“关于”上。起初可能并不明显，但当UL向下延伸时，列表项非常明显。

Answer 1

只需在代码中添加一行就可以了：

.dMaster2 {
    /*...*/
    overflow:hidden;
}

图片的标题说明：

为了便于使用，您应该将动画减少到最大值。 1秒。用户不希望等待2秒钟才能展开下拉列表。

此外，您不需要关键帧来执行此操作，只需为ul元素的height属性设置动画。

.dMaster2 {
    /*...*/
    visibility:hidden; /* <- remove this line! */
    overflow:hidden;
    transition:height .3s; /*add height transition, use ~ .5s */
    /* if you add the transition to the root element both, mousein and mouseout
       will be animated, which is not the case if you put it on the :hover */
    height:0;              /*add height property */
}
ul li:hover ul {
    color: #FFF;
    visibility: visible;
    height:102px;        /*add height property */
    /* if you put the transition here, only the mousein will be animated */
}

Your modified fiddle

Answer 2

5月that是你想要的吗？

基本上它为每一行使用不同的transition-delay。

当我没有在最后一个时，我努力使这个fiddle更清楚。你应该真的检查第二个是否有优点。

目标是实现一次显示一个。两个解决方案：

每行唯一ID
使用nth-child获取每一行。

假设我们有3个项目以3s显示。这是我们的时间表：

t      Action
_____________
0 | The rectangle begins to display.
  |
1 | Rectangle at 1/3 of its height. We display our item n° 1.
  |
2 | Rectangle at 2/3 of its height. We display our item n° 2.
  |
3 | Rectangle at 3/3 of its height. We display our item n° 3.
  v

让我们重新编写代码：

<强> HTML

<a>Hover me</a>

<ul>
    <li>Hey</li>
    <li>Hi</li>
    <li>Ho</li>
</ul>

我们的目标很简单：

我们希望如果我们将鼠标拖到<a>标记上，它会逐步显示<ul>和不同的<li>元素。此外，如果鼠标位于菜单上方，我们希望它保持不变，但如果鼠标离开<a>或<ul>，我们会立即消失。

<强> CSS

基础

ul { /* Hidden and width no height */
    visibility: hidden;
    background-color: white;
    height: 0px;
    border: 1px solid black;
}

a:hover ~ ul { /* When the mouse goes over the <a> it becomes visible and begins the transition */
    visibility: visible;
    background-color: orange;
    height: 60px;
    transition: height 3s;
}

现在我们进入“棘手的部分”：

a:hover ~ ul li { /* Default behaviour for appearing */
    opacity: 1;
    transition: opacity 0.2s;
}

/* And now for each child, its custom delay :*/

a:hover ~ ul li:nth-child(1) {
    transition-delay: 1s;
}

a:hover ~ ul li:nth-child(2) {
    transition-delay: 2s;
}

a:hover ~ ul li:nth-child(3) {
    transition-delay: 3s;
}

TADAAAAM ！容易腻！

另一方面，要避免它们逐渐消失：

/* To make the depop instantly */

a ~ ul li {
    opacity: 0;
    transition-delay: 0s;
}

a ~ ul li:nth-child(1) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(2) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(3) {
    transition-delay: 0s;
}

你走了。当然，它不是很有活力，如果你需要为每个孩子做这件事，很快就会很无聊。但您可以使用脚本生成该代码。：）

希望它有所帮助。

LI可见性未与UL高度相关

2 个答案: