显示屏上的转换：属性

Question

显示屏上的转换：属性我目前正在设计一个CSS'mega dropdown'菜单 - 基本上是一个常规的CSS-only下拉菜单，但包含不同类型的内容。目前，似乎CSS3过渡不适用于“display”属性，即你不能做任何类型的过渡display: none到display: block（或任意组合）。当有人将鼠标悬停在其中一个顶级菜单项上时，是否有人会想到上述示例中的第二层菜单可以“淡入”？我知道你可以在visibility:属性上使用转换，但我想不出有效利用它的方法。我也尝试过使用身高，但这只是失败了。我也知道使用JavaScript实现这一点是微不足道的，但我想挑战自己只使用CSS而且我认为我现在有点短。欢迎所有和任何建议。

Answer 1

您可以连接两个或更多转换，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>

不要忘记transition属性的供应商前缀）

更多细节在本文中

Answer 2

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

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

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

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

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

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

---

更新2019 - 也支持淡出的方法：

（有些JS需要）

// We need to keep track of faded in elements so we can apply fade out later in CSS

document.addEventListener('animationstart', function (e) {

  if (e.animationName === 'fade-in') {

      e.target.classList.add('did-fade-in');   

  }

});

document.addEventListener('animationend', function (e) {

  if (e.animationName === 'fade-out') {

      e.target.classList.remove('did-fade-in');

   }

});

div {

    border: 5px solid;

    padding: 10px;

}

div:hover {

    border-color: red;

}

 

.parent .child {

  display: none;

}

 

.parent:hover .child {

  display: block;

  animation: fade-in 1s;

}

.parent:not(:hover) .child.did-fade-in {

  display: block;

  animation: fade-out 1s;

} 

@keyframes fade-in {

  from { 

    opacity: 0; 

  }

  to { 

    opacity: 1; 

  }

}

@keyframes fade-out {

  from { 

    opacity: 1; 

  }

  to { 

    opacity: 0;

  }

}

<div class="parent">

    Parent

    <div class="child">

        Child

    </div>

</div>