Переключение css классов на изменение размера элемента делает нервным - PullRequest
Новая
       5

Переключение css классов на изменение размера элемента делает нервным

0 голосов
/ 14 января 2020

Я работаю над адаптивным макетом, но я не могу понять, как сделать плавный переход при переключении класса с другим стилем.

Я хочу определить размер элемента при загрузке страницы и добавить класс, если размер соответствует. Я могу сделать эту часть и применил то же самое к событию изменения размера. Но при изменении размера элемент немного нервничает.

Как мне предотвратить это?

Мой код прост, как показано ниже: 

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

...