CSS3过渡淡化与display:none

Question

我有一些我想用CSS3 淡化的元素.它可以简单地通过2个教学班,做和,但问题是褪色的因素是一些下拉菜单,它具有以下要素,所以即便有不透明度:0,其仍然"点击"和元素下它都没有.opacity: 0opacity: 1

如果我添加display: none;属性,则元素不是动画的.

是否可以用css来避免它？

我检查了这个,但没有找到有效的解决方案

http://jsfiddle.net/Eh7jr/

Answer 1

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

小提琴

请参阅此文章:

尽管CSS基本框模型规范说"动画:否",但可见性动画

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
    }
}