core-web-vitals - jQueryアニメーションが累積レイアウトシフトに与える悪影響を回避する方法はありますか?

Question

私はオンラインアプリを持っています。コンテナーの高さを変更すると、非常に長いアニメーションがトリガーされます。ただし、目的地の高さは予測できません。これにより、すべての下位 DOM ノードに CLS スコアが課せられます。参考までに: CLS は、ユーザーのアクション (この場合はクリック) 後の最初の 500 ミリ秒のレイアウト シフトのみを許します。また、アニメーションは 15 秒以上続きます。

予測できないためmin-height、ほとんどの記事が示唆するように a を設定できませんでした。回避する方法はありますか？

率直に言って、これがユーザー エクスペリエンスに悪影響を与えることはないと思います。なぜなら、ユーザーはアニメーションの進行状況を確認し、アニメーションが完了したらいつページを操作するかを知っているからです。

$('#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>