如何解决有什么方法可以避免 jQuery 动画对累积布局偏移的负面影响?
我有一个在线应用。它会触发一个很长的动画来改变容器的高度。然而,目的地高度是不可预测的。这使得所有较低的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。