css - CSS3 过渡淡入显示：无

Question

我有一些我想用CSS3淡化的元素。它可以简单地通过 2 个类和来完成，但问题是褪色的元素是一些下拉菜单，它下面有元素，所以即使它有 opacity: 0，它仍然是“可点击的” ，而它下面的元素不是。opacity: 0opacity: 1

如果我添加display: none;属性，则元素不会动画。

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

我已经检查过了，但没有找到有效的解决方案

http://jsfiddle.net/Eh7jr/

Answer 1

而不是display:none，尝试使用visibility: hidden;

小提琴

请参阅这篇文章，其中指出：

尽管 CSS 基本框模型规范说“Animatable: no”，但可见性仍然存在动画</p>

Answer 2

您可以通过 100% CSS 纯代码来完成。

.menu > li > ul{
    display: none;
}
.menu > li:hover > ul {
    display: block;
    animation-duration: 0.5s;
    animation-name: fadeInFromNone;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-duration: 0.5s;
    -ms-animation-name: fadeInFromNoneIE;
    -ms-animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNoneIE {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

Answer 3

您可以使用以下方法使元素不接受点击：

.hidden
{
    pointer-events:none;
}

Answer 4

注意到上面 JS Fiddle 中的示例被破坏了，在此处修复代码：

 <style>
div {
    position: absolute;
    transition: all 2s;
}
div.opa {
    opacity: 0;
    visibility:hidden;
}
</style>
<div class=opa>dsdsds</div>
<br> <br>
<p><a href="#">clickme</a></p>
<script>
$('a').click(function(){
    $('div').toggleClass('opa');    
})
</script>

修复了小提琴：

Answer 5

尝试通过将 z-index 应用于负值来制作不接受点击的元素。

a{z-index: -999;}

哦！我理解你的问题。我认为你可以设置visibility: collapse;比隐藏更好。