爲什麼這不是在淡出而是僅僅顯示它？

Question

我想在使用css轉換的塊中淡入淡出。在將顯示設置爲無阻塞後，我有一個設置爲不透明度爲1的類。它忽略了過渡。有人可以告訴我爲什麼嗎？謝謝。

的jsfiddle：http://jsfiddle.net/qhvC2/2/

標記：

<div class="fade-alert"> 
</div> 
<button class="my_butt" type="button">click me</button> 

CSS：

.fade-alert { 
    width: 200px; 
    height: 100px; 
    background: purple; 
    opacity: 0; 
    -webkit-transition: opacity 1.0s linear; 
    -moz-transition: opacity 0.5s linear; 
     -o-transition: opacity 0.5s linear; 
      transition: opacity 1.0s linear; 
    display: none; 
} 

.fade-alert.in 
{ 
    opacity: 1; 

} 

的javascript：

$(".my_butt").on("click", function(e){ 
$(".fade-alert").css("display", "block"); 
$(".fade-alert").addClass("in"); }); 

Answer 1

最後，我用的transitionEnd事件監聽使用jquery從這個蘇答案：Callback when CSS3 transition finishes

Answer 2

如果你打算使用jQuery反正爲什麼不˚F用jQuery

ADE它

DEMO http://jsfiddle.net/kevinPHPkevin/qhvC2/3/

$('.my_butt').click(function() { 
     $('.fade-alert').fadeIn('slow', function() { 
     // Animation complete 
     }); 
    }); 

修訂

使用你的代碼，你可以做這樣的DEMO http://jsfiddle.net/kevinPHPkevin/qhvC2/5/

CSS

.fade-alert { 
    width: 200px; 
    height: 100px; 
    background: purple; 
    opacity: 0; 
    -webkit-transition: opacity 1.0s linear; 
    -moz-transition: opacity 0.5s linear; 
    -o-transition: opacity 0.5s linear; 
    transition: opacity 1.0s linear; 
} 
.in { 
    opacity: 1; 
} 

JS

$(".my_butt").on("click", function(e){ 
    $(".fade-alert").addClass("in"); }); 

與剛剛添加的不透明度1，而不是捲入與display或visibilty這樣

最新的選項，以消除身高問題理論上講，你可以這樣做DEMO http://jsfiddle.net/kevinPHPkevin/qhvC2/6/

JS

$(".my_butt").on("click", function (e) { 
    $(".fade-alert").addClass("in"); 
}); 

CSS

.fade-alert { 
    width: 200px; 
    background: purple; 
    opacity: 0; 
    -webkit-transition: opacity 1.0s linear; 
    -moz-transition: opacity 0.5s linear; 
    -o-transition: opacity 0.5s linear; 
    transition: opacity 1.0s linear; 
    height: 0; 
    overflow: hidden; 
} 
.fade-alert.in { 
    opacity: 1; 
    height: auto; 
} 

Answer 3

這裏是代碼，你可以用你的CSS替換此，它工作正常

這裏是小提琴鏈接http://jsfiddle.net/sarfarazdesigner/qhvC2/4/

.fade-alert { 
    width: 200px; 
    height: 100px; 
    background: purple; 
    opacity: 0; 
    -webkit-transition: opacity 1.0s linear; 
    -moz-transition: opacity 0.5s linear; 
     -o-transition: opacity 0.5s linear; 
      transition: opacity 1.0s linear; 
    visibility:hidden; 
} 

.fade-alert.in 
{ 
    opacity: 1; 
    visibility:visible; 
} 

Answer 4

而不是使用過渡的，你可以使用CSS動畫 這裏有一個小提琴： http://jsfiddle.net/zCyeD/

因此，您不必擔心在點擊之前或之後在項目上設置不透明度或可見性狀態。所有你需要做的就是將它從display none改爲顯示block，當切換到display block時，你觸發動畫 - 發生這種情況是因爲動畫只會觸發一次.fadeIn gets。應用於它。動畫本身設置爲持續1秒並調用關鍵幀。所寫的關鍵幀立即使項目0％不透明，並在動畫結束時將其轉換爲100％不透明度。

的jQuery：

$(".my_butt").on("click", function(e){ 
    $(".fade-alert").addClass("in"); 
}); 

CSS：

.fade-alert { 
    width: 200px; 
    height: 100px; 
    background: purple; 
    display: none; 
} 

.fade-alert.in 
{ 
    display:block; 
    -webkit-animation: fadeIn 1s; /* Safari 4+ */ 
    -moz-animation: fadeIn 1s; /* Fx 5+ */ 
    -o-animation:  fadeIn 1s; /* Opera 12+ */ 
    animation:   fadeIn 1s; /* IE 10+ */ 
} 

@-webkit-keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-moz-keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@-o-keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 
@keyframes fadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
} 

我從一個jQuery設置移動您的顯示模塊，只是將它添加到CSS，你已經反正添加類 - 保持它位整潔。