CSS3过渡淡出与显示：无 [英] CSS3 transition fadein with display:none

问题描述

我有一些要用 CSS3 来淡化的元素。它可以通过两个类用 opacity：0 和 opacity：1 简单地完成，但问题是褪色的元素是一些下拉菜单，并且下有元素，因此即使它的 仍然 不透明度为0， 。

如果我添加 display：none; 属性，元素

是否可以使用仅限css 来避免它？

已检查这但未找到工作解决方案

http://jsfiddle.net/Eh7jr/

解决方案

代替 display：none ，尝试使用 visibility：hidden; p>

FIDDLE

请参阅本文，其中说明：

$ b尽管CSS基本框模型规范说
Animatable：no

I've got some element I want to fade with CSS3. It can be simply done by 2 classes with opacity: 0 and opacity: 1, but problem is faded element is some dropdown menu and it has elements under it, so even if it has opacity: 0, its still 'clickable' and elements under it are not.

If I add display: none; attribute, element is not animated.

Is it possible with css only to avoid it?

I've checked this but didnt find working solution

http://jsfiddle.net/Eh7jr/

解决方案

Instead of display:none, try using visibility: hidden;

FIDDLE

See this article which states:

visibility animates despite the CSS Basic Box Model spec saying "Animatable: no"

这篇关于CSS3过渡淡出与显示：无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！