Избегайте эффекта мерцания на кнопках меню при изменении размера экрана

Question

Я сделал меню с flexbox.К последнему элементу списка прикреплено псевдо «: after», которое будет занимать оставшееся пространство, если только это оставшееся пространство не меньше определенного процента от размера экрана.Это работает, но когда я изменяю размер экрана, на элементах меню появляется эффект мерцания.

<ul class="tags boldcond">
 <li><a href="#">Long Category Name</a></li>
 <li><a href="#">Software Engineering</a></li>
 <li><a href="#">Mobile &amp; IOT</a></li>
 <li><a href="#">Digital</a></li>
 <li><a href="#">Automation</a></li>
 <li><a href="#">Agile</a></li>
 <li><a href="#">Analysis</a></li>
 <li><a href="#">Architecture</a></li>
 <li><a href="#">Artificial intelligence</a></li>
 <li><a href="#">Digital &amp;AI</a></li>
 <li><a href="">Diana Test</a></li>
 <li><a href="">Long Category Name</a></li>
 <li><a href="#">Software Engineering</a></li>
 <li><a href="#">Mobile &amp; IOT</a></li>
 <li><a href="#">Digital</a></li>
 <li><a href="#">Automation</a></li>
 <li><a href="#">Agile</a></li>
 <li><a href="#">Analysis</a></li>
 <li><a href="#">Architecture</a></li>
 <li><a href="#">Artificial intelligence asdf</a></li>         

script.js

function SetLiWidth() {
  let width = window.getComputedStyle(
   document.querySelector('ul'), ':after'
  ).width;

  let percentage = Math.round(window.innerWidth) * 50 / 100;  
  let selectList = document.querySelector('ul');

  if (Math.round(parseInt(width)) < percentage) {
    selectList.classList.add('expanded');
  }else{
    selectList.classList.remove('expanded');
  };
}


window.onresize = function(event) {
  SetLiWidth();
};

style.css

*{
  margin:0;
  padding:0
}

ul {
  display:flex;
  flex-wrap:wrap;
  list-style:none;
}
li {
    background:#64666d;
    padding:10px;
    flex:1 0 auto;
    margin:5px
}

a {
  color:#fff;
  text-decoration:none
}
ul::after {
  content:'';
  flex-grow:100;

}
ul.expanded::after {
display: none;
}

Когда я применяю display: none на ul.expanded :: after, я хотел бы, чтобы переход был более плавным?Кто-нибудь может помочь, пожалуйста?

Answer 1

Иногда он получает ширину как 'auto'

Просто добавьте следующую строку кода после того, как вы получите ширину:

if(width == 'auto') return;

Ниже приведена измененная функция:

function SetLiWidth() {
  let width = window.getComputedStyle(
   document.querySelector('ul'), ':after'
  ).width;
  if(width == 'auto') return;

  let percentage = Math.round(window.innerWidth) * 50 / 100;  
  let selectList = document.querySelector('ul');

  if (Math.round(parseInt(width)) < percentage) {
    selectList.classList.add('expanded');
  }else{
    selectList.classList.remove('expanded');
  };
}