显示的转换：属性 [英] Transitions on the display: property

问题描述

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

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

现在，看起来CSS3过渡不适用于'display'属性，即你不能从 display：none 到 display：block （或任何组合）。

At the moment, it appears that CSS3 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).

任何人都可以想到第二层菜单上面的例子，当有人悬停在顶级菜单项之一时，淡入？

Can anyone think of 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 utilise that effectively.

我也尝试使用height，只是失败了。

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

我也知道使用JavaScript实现这一点并不重要，但我想挑战自己使用CSS，我想我会来

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.

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

All and any suggestions most welcome.

推荐答案

p>您可以连接两个过渡或更多，并且 visibility 是这次很方便。

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

div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

（不要忘记供应商前缀到过渡属性）

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

详情请参阅本文

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