Переход CSS fadein с дисплеем: нет

У меня есть элемент, который я хочу fade с CSS3. Его можно просто сделать двумя классами с opacity: 0 и opacity: 1, но проблема в выцветшем элементе - это какое-то выпадающее меню, и оно имеет элементы под, поэтому даже если оно имеет непрозрачность: 0, его еще 'clickable' и элементы под это не так.

Если я добавляю атрибут display: none;, элемент не анимируется.

Возможно ли с css только избежать этого?

Я проверил этот, но не нашел рабочего решения

http://jsfiddle.net/Eh7jr/

Ответ 1

Вместо display:none попробуйте использовать visibility: hidden;

FIDDLE

Смотрите эту статью, в которой говорится:

видимость анимирует, несмотря на спецификацию CSS Basic Box Model "Анимация: нет"

Ответ 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
    }
}

Ответ 3

Вы можете заставить элемент не принимать клики с этим:

.hidden
{
    pointer-events:none;
}

Ответ 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:

Ответ 5

попробуйте сделать элемент, который не принимает клик, применяя z-index к отрицательному значению.

a{z-index: -999;}

О! Я понял вашу проблему. Вы можете установить visibility: collapse; лучше, чем скрытый, я думаю.