Chuyển tiếp CSS3 fadein có màn hình: none

Question

Tôi có một số phần tử tôi muốn fade với CSS3. Nó có thể được chỉ đơn giản là thực hiện bởi 2 lớp với opacity: 0 và opacity: 1, nhưng vấn đề là nhạt dần yếu tố là một số trình đơn thả xuống và nó có yếu tố dưới nó, vì vậy ngay cả khi nó có opacity: 0, nó vẫn 'có thể nhấp' và các yếu tố dưới thì không.

Nếu tôi thêm thuộc tính display: none;, phần tử là không hoạt ảnh.

Có thể với css chỉ để tránh không?

Tôi đã kiểm tra this nhưng didnt tìm giải pháp làm việc

http://jsfiddle.net/Eh7jr/

Answer 1

Thay vì display:none, hãy thử sử dụng visibility: hidden;

FIDDLE

Xem this article trong đó nêu:

tầm nhìn sinh động bất chấp sự CSS cơ bản Hộp mẫu đặc tả nói “Animatable: không có”

Answer 2

Bạn có thể làm cho một phần tử không chấp nhận nhấp chuột với điều này:

.hidden 
{ 
    pointer-events:none; 
} 

Answer 3

cố gắng để làm cho một yếu tố mà không chấp nhận nhấp vào bằng cách áp dụng chỉ mục z vào giá trị âm.

a{z-index: -999;} 

Oh! Tôi hiểu vấn đề của bạn. Bạn có thể đặt visibility: collapse; tốt hơn là ẩn tôi nghĩ.

Answer 4

Nhận thấy ví dụ trong Fiddle JS trên đã bị hỏng, sửa mã ở đây:

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

Cố định các fiddle:

Answer 5

Bạn có thể làm điều đó bằng 100% mã tinh khiết 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 
    } 
}