在元素调整大小上切换CSS类会产生抖动

Question

我正在研究响应式布局，但我不知道如何在切换具有不同样式的类时进行平滑过渡。

我想确定页面加载时元素的大小，并在满足大小的情况下添加一个类。我能够做到这一点，并将其应用于调整大小事件。但是，调整大小后，该元素有点抖动。

如何防止这种情况发生？

我的代码很简单，如下所示：

 $(window).on('load',function (){

        let stats = $('.stats').width(),
            breakdown = $('.breakdown-item').width();

        if (stats < 860){
          $('.stats .upper').addClass('wrap');
        }else{
          $('.stats .upper').removeClass('wrap');
        }

        if (stats < 501) {
          $('.content-inner').addClass('wrap');
        }else{
          $('.content-inner').removeClass('wrap');
        }


        if (breakdown < 300) {
          $('.breakdown .breakdown-item').addClass('wrap');
        }else{
          $('.breakdown .breakdown-item').removeClass('wrap');
        }
      })

      $(window).on('resize',function() {
        var width = $('main .stats').width();

        if (width < 501) {
          $('.content-inner').addClass('wrap');
        }else{
          $('.content-inner').removeClass('wrap');
        }
        console.log(width);
      })
    })(jQuery)

https://codepen.io/leonardpbdigital/pen/KKwBzgy

实际情况如下：https://share.getcloudapp.com/2Nur6jp2