javascript - 在显示上执行过渡效果 :none element with hack

Question

我想顺利显示div来自display:none至display:block 。我知道 display:none 无法做到这一点，所以我首先尝试申请display:block然后执行转换，但这不起作用。

HTML

<input type="text" class="inp">
<div class="div"></div>

CSS

.div {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 100px;
  width: 100px;
  background: #000;
  transition: 2s;
}
.block {
  display:block;
}
.div-focused {
  visibility: visible;
  opacity: 1;
  transition: 2s;
}
.one {
  background: #ff0;
}

jQuery*

$(document).ready(function() {
    $(".inp").on("keyup", function () {
       if ( !$(this).val() ) {
           $(".div").removeClass("one");
       }
       else {
           $(".div").addClass("block");
           $(".div").addClass("div-focused");
           $(".div").addClass("one");
       }
    });
});

这是jsfiddle

Answer 1

$(document).ready(function() {
$(".inp").on("keyup", function () {
   if ( !$(this).val() ) {
       $(".div").removeClass("one");
   }
   else {
       $(".div").addClass("block");
         $(".div").addClass("one");
           $(".div").animate({opacity: "1"},500);
   }
  });
});

jsfiddle 试试这个