显示屏上的过渡：属性

我目前正在设计一种CSS'mega dropdown'菜单 - 基本上是一个普通的CSS下拉式菜单，但是它包含不同类型的内容。

目前， 看起来CSS3转换不适用于'display'属性 ，也就是说你不能做任何从display: none到display: block （或任何组合）的转换。

任何人都可以为上面的例子中的第二层菜单设想一种方式，当有人悬停在顶层菜单项之一上时“淡入”？

我知道你可以在visibility:属性上使用转换，但我想不出有效利用它的方法。

我也尝试过使用高度，但是失败了。

我也意识到使用JavaScript来实现这一点很简单，但我想挑战自己只使用CSS，而且我认为我的想法有点短了。

所有和任何建议最受欢迎。

---

您可以连接两个或更多的转换，而visibility是这次派上用场的。

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

---

您需要通过其他方式隐藏该元素才能使其发挥作用。

我通过绝对定位两个<div>并将隐藏的一个设置为opacity: 0来实现效果opacity: 0 。

如果您甚至将display属性从none切换为block ，则不会发生其他元素的转换。

要解决此问题，请始终允许该元素display: block ，但通过调整以下任何方式来隐藏该元素：

将height设置为0 。

将opacity设置为0 。

将元素放置在另一个overflow: hidden元素的框架之外overflow: hidden 。

有可能有更多的解决方案，但如果您将元素切换到display: none无法执行转换。 例如，你可以尝试尝试这样的事情：

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

但是，这是行不通的。 根据我的经验，我发现这无所作为。

正因为如此，你总是需要保持元素display: block - 但你可以通过做这样的事情来解决它：

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

---

在本文发布时，如果您尝试更改display属性，所有主流浏览器都会禁用CSS转换，但CSS动画仍然可以正常工作，因此我们可以将它们用作解决方法。

示例代码： - （您可以将其应用于您的菜单）演示

将以下CSS添加到您的样式表中： -

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

然后将fadeIn动画应用于父悬停上的子项： - （当然，设置display: block ）

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

链接地址: http://www.djcxy.com/p/4703.html

上一篇: Transitions on the display: property

下一篇: How can I make the cursor a hand when a user hovers over a list item?