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

Question

我想从 display:none 到 display:block 平滑地显示 div。我知道不能对 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试试这个