CSS 显示属性上的转换 [英] Transitions on the CSS display property

问题描述

我目前正在设计一个 CSS 的大型下拉"菜单 - 基本上是一个普通的 CSS 下拉菜单，但包含不同类型的内容.

目前，似乎 CSS 3 转换不适用于显示"属性，即您不能从 display: none 进行任何类型的转换 到 display: block(或任意组合).

当有人将鼠标悬停在顶级菜单项上时，是否可以让上述示例中的二级菜单淡入"?

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

我也尝试过使用高度，但失败得很惨.

我也知道使用 JavaScript 来实现这一点很简单，但我想挑战自己只使用 CSS，我想我会有点短.

解决方案

您可以连接两个或多个过渡，而 visibility 这一次很方便.

div {边框:1px 实心 #eee;}div >ul{可见性:隐藏；不透明度:0；过渡:可见性 0s，不透明度 0.5s 线性；}div:悬停 >ul{可见性:可见；不透明度:1；}

<ul><li>项目 1</li><li>项目 2</li><li>项目 3</li>

(不要忘记 transition 属性的供应商前缀.)

更多详情见这篇文章.

I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content.

At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you can't do any sort of transition from display: none to display: block (or any combination).

Is there a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items?

I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.

I've also tried using height, but that just failed miserably.

I'm also aware that it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.

解决方案

You can concatenate two transitions or more, and visibility is what comes handy this time.

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>

(Don't forget the vendor prefixes to the transition property.)

More details are in this article.

这篇关于CSS 显示属性上的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！