jquery - 为什么这不会在 block 中消失而不是只是显示它？

Question

我正在尝试使用 CSS 过渡淡入一个 block 。在将显示设置为不阻止显示之后，我有一个设置为不透明度 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

这是代码，您可以用您的 css 替换它，它工作正常

这是 fiddle 链接 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;
}