0

我有一个在线应用程序。它会触发一个很长的动画来改变容器的高度。然而，目的地高度是不可预测的。这会使所有较低的 DOM 节点都受到 CLS 分数的惩罚。仅供参考：CLS 仅在用户操作后原谅前 500 毫秒的布局转换（在这种情况下单击）。并且动画持续时间超过 15 秒。

因为它是不可预测的，所以我不能min-height像大多数文章建议的那样设置。有什么办法可以避免吗？

坦率地说，我认为这对用户体验没有任何负面影响，因为她/他会看到进度并知道动画完成后何时与页面交互。

$('#confirm').click(function(){

  $({val: 0}).animate({val: 200*Math.random()}, {
    duration: 15000,
    easing: 'linear',
    step: function() { 
      $('#test').css('height', this.val+'px').html(this.val);
    },complete:function(){
    
    }
  });



})
#test{background:red}
button {font-size:2em;padding:1em;margin:1em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test"></div>
<button id="confirm">Yes</button>

4

0 回答 0