为什么它不在块中淡出，而只是显示出来呢？

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，为什么不直接用jQuery淡入呢

演示http://jsfiddle.net/kevinPHPkevin/qhvC2/3/

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

已更新

使用您的代码，您可以像这样做演示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

要消除高度问题，您可以执行以下演示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;
}