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

Posted 2023-03-06

【中文标题】在显示上执行过渡效果：使用 hack 的无元素

【英文标题】：Perform transition effects on display:none element with hack

【发布时间】：2019-02-17 18:09:16

【问题描述】：

我想将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

【参考方案1】：

您要求破解？ Element.offsetTop 是你的朋友。

当您请求此属性时，浏览器会强制对页面进行重排，因此会添加类并且可以同步触发转换。

$(document).ready(function() 
  $(".inp").on("keyup", function() 
    var $div = $('.div');
    if (!$(this).val()) 
      $div.removeClass("one");
     else 
      $div.addClass("block");
      $div[0].offsetTop; // here is the magic
      $div.addClass("div-focused one");
    
  );
);

.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;

<input type="text" class="inp">
<div class="div"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

【讨论】：

太棒了！正是我想要的！谢谢！如果您当然知道，您能否告诉我：这是否被认为是回流比使用重的性能...animate，例如？

animate 会在一段时间内更改元素的属性，因此您将获得比单次回流更多的回流和重绘。此外，浏览器仅在需要时才会重排。所以我会说性能明智，最好使用这个offsetTop

再次非常感谢！你是最棒的:)

【参考方案2】：

用下面的代码替换你的 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：https://jsfiddle.net/priyaraj/ggqztzvh/

【参考方案3】：

$(document).ready(function() 
 	$("div").hide();
    $(".inp").on("keyup", function () 
       if ( $(this).val()=="") 
           $("div").fadeOut(3000);
        else 
        $("div").fadeIn(4000);
       
    );
);

.div 
  height: 100px;
  width: 100px;
  background: red;
  transition: 2s;

.block 
  display:block;

.div-focused 
  visibility: visible;
  opacity: 1;
  transition: 2s;

.one 
  background: #ff0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div class="div"></div>

【讨论】：

这正是我的代码 :) 除了额外但不必要的功能。这不起作用

是的，我注意到了。谢谢 :) 但这与问题无关......我正在寻找完全不同的功能

你想要什么功能？

我需要display:none元素的平滑过渡效果。我专门在transition 中使用了2 的高值，所以它何时会起作用

【参考方案4】：

$(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 试试这个

【讨论】：

是的，我知道这种方法，但我对此表示怀疑。为什么没有超时就不能工作？在转换之前添加的.block。

显示：无；从页面中删除一个块，就好像它从未存在过一样。块不能部分显示；它要么存在，要么不存在。可见性也是如此。你不能指望一个块是半隐藏的，根据定义，它是可见的！幸运的是，您可以使用 opacity 来代替渐变效果。

.block 在transition 之前将block 值添加到display