为什么这不是在淡出而是仅仅显示它？

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，你已经反正添加类 - 保持它位整洁。