Question

我想要淡化 CSS3 。它可以通过opacity: 0和opacity: 1的2个类完成，但问题是淡化元素是一些下拉菜单，它有元素，所以即使它有不透明度：0，仍然'可点击'，而下的元素则不是。

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

仅限css 可以避免吗？

我已经检查了this，但没有找到可行的解决方案

http://jsfiddle.net/Eh7jr/

Answer 1

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

<强> FIDDLE

请参阅this article说明：

尽管CSS Basic Box Model规范说明，但可见性动画仍然存在 “动画：没有”

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>

修正了fiddle：

Answer 5

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

a{z-index: -999;}

哦！我明白你的问题。您可以设置visibility: collapse;比我想的更好。

CSS3过渡淡化与display：none

5 个答案: