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;
}

当我在ul.expanded :: after上应用display：none时，我希望转换更加平滑吗？有人可以帮忙吗？

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');
  };
}

调整屏幕大小时避免菜单按钮闪烁

1 个答案: