Javascript 在显示上执行过渡效果：使用hack无元素

我希望平滑地显示

div

从

display:none

到

display:block

。我知道无法对

display:none

执行此操作，因此我尝试先应用

display:block

，然后执行转换，但这不起作用

HTML

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

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");
       }
    });
});

这是

$（文档）.ready（函数（）{
$（“div”）.hide（）；
$（“.inp”）。在（“键控”，函数（）{
if（$（this）.val（）==“”）{
美元（“div”）。淡出（3000）；
}否则{
美元,法代因(4000美元);；
}
});
});
.div{
高度：100px；
宽度：100px；
背景：红色；
过渡：2s；
}
.街区{
显示：块；
}
.分区重点{
能见度：可见；
不透明度：1；
过渡：2s；
}
.一{
背景：#ff0；
}


$（文档）.ready（函数（）{
$（“div”）.hide（）；
$（“.inp”）。在（“键控”，函数（）{
if（$（this）.val（）==“”）{
美元（“div”）。淡出（3000）；
}否则{
美元,法代因(4000美元);；
}
});
});
.div{
高度：100px；
宽度：100px；
背景：红色；
过渡：2s；
}
.街区{
显示：块；
}
.分区重点{
能见度：可见；
不透明度：1；
过渡：2s；
}
.一{
背景：#ff0；
}



试试这个


尝试使用以下代码替换css和脚本

/* style */
.div {
   display: none;
    height: 100px;
   width: 100px;
   background: #000;
 }


/* Script */

$(document).ready(function() {
   $(".inp").on("keyup", function () {
      if ( !$(this).val() ) {
        $(".div").css("opacity",0);
    }
    else {

       var item = $(this).val();
       var length = item.length;
       var opacity = length/10;
       $(".div").css("display","block");
       $(".div").css("opacity",opacity);
     }
   });
});

尝试dis:
用以下代码替换css和脚本

/* style */
.div {
   display: none;
    height: 100px;
   width: 100px;
   background: #000;
 }


/* Script */

$(document).ready(function() {
   $(".inp").on("keyup", function () {
      if ( !$(this).val() ) {
        $(".div").css("opacity",0);
    }
    else {

       var item = $(this).val();
       var length = item.length;
       var opacity = length/10;
       $(".div").css("display","block");
       $(".div").css("opacity",opacity);
     }
   });
});

试试dis:
你要求黑客<代码>元素。offsetTop
是你的朋友

当您请求此属性时，浏览器将被迫对页面进行回流，以便添加类并同步触发转换


$（文档）.ready（函数（）{
$（“.inp”）。在（“键控”，函数（）上{
变量$div=$（'.div'）；
if（！$（this.val（））{
$div.removeClass（“一”）；
}否则{
$div.addClass（“块”）；
$div[0].offsetTop；//这就是神奇之处
$div.addClass（“div-focused one”）；
}
});
});
.div{
显示：无；
可见性：隐藏；
不透明度：0；
高度：100px；
宽度：100px；
背景：#000；
过渡：2s；
}
.街区{
显示：块；
}
.分区重点{
能见度：可见；
不透明度：1；
过渡：2s；
}
.一{
背景：#ff0；
}
你要求黑客<代码>元素。offsetTop
是你的朋友

当您请求此属性时，浏览器将被迫对页面进行回流，以便添加类并同步触发转换


$（文档）.ready（函数（）{
$（“.inp”）。在（“键控”，函数（）上{
变量$div=$（'.div'）；
if（！$（this.val（））{
$div.removeClass（“一”）；
}否则{
$div.addClass（“块”）；
$div[0].offsetTop；//这就是神奇之处
$div.addClass（“div-focused one”）；
}
});
});
.div{
显示：无；
可见性：隐藏；
不透明度：0；
高度：100px；
宽度：100px；
背景：#000；
过渡：2s；
}
.街区{
显示：块；
}
.分区重点{
能见度：可见；
不透明度：1；
过渡：2s；
}
.一{
背景：#ff0；
}

这正是我的代码：），除了附加的但不必要的功能。这不起作用是的，我注意到了。谢谢：）但这与问题无关。。。我正在寻找完全不同的功能您想要哪种功能？我需要
display:none
元素上的平滑过渡效果。我在
transition
中特别使用了
2
的高值，因此它在工作时会非常明显。这正是我的代码：）除了额外但不必要的功能之外。这不起作用是的，我注意到了。谢谢：）但这与问题无关。。。我正在寻找完全不同的功能您想要哪种功能？我需要
display:none
元素上的平滑过渡效果。我在
transition
中特别使用了
2
的高值，因此它在工作时会非常明显。是的，我知道这种方法，但我对此表示怀疑。为什么它没有超时就不能工作？转换前添加的
.block
。显示：无；从页面中删除块，就好像它从未出现过一样。块不能部分显示；要么在那里，要么不在。能见度也是如此；你不能期望一个块是半隐藏的，根据定义，它是可见的！幸运的是，您可以使用不透明度来代替淡入效果。
.block
在
转换之前将
block
值添加到
显示中
。是的，我知道这种方法，但我对此表示怀疑。为什么它没有超时就不能工作？转换前添加的
.block
。显示：无；从页面中删除块，就好像它从未出现过一样。块不能部分显示；要么在那里，要么不在。能见度也是如此；你不能期望一个块是半隐藏的，根据定义，它是可见的！幸运的是，您可以使用不透明度来代替淡入淡出效果。
.block
在
转换之前将
block
值添加到
显示中
，这太棒了！正是我要找的！非常感谢。你能告诉我，如果你当然知道：这被认为是性能重回流比使用<例如，代码>动画
？动画将在一段时间内更改元素的属性，因此您将获得比此单次回流多得多的回流和重绘。此外，浏览器只有在需要时才会回流。所以我想说，性能方面，最好使用这个
offsetTop
再次非常感谢！你是最棒的：）太棒了！正是我要找的！非常感谢。你能告诉我，如果你当然知道：这被认为是性能重回流比使用<代码>动画
，例如
/* style */
.div {
   display: none;
    height: 100px;
   width: 100px;
   background: #000;
 }


/* Script */

$(document).ready(function() {
   $(".inp").on("keyup", function () {
      if ( !$(this).val() ) {
        $(".div").css("opacity",0);
    }
    else {

       var item = $(this).val();
       var length = item.length;
       var opacity = length/10;
       $(".div").css("display","block");
       $(".div").css("opacity",opacity);
     }
   });
});