javascript - Flexbox、滚动元素

Question

我有一个水平对齐的 flexbox，里面有 62 个元素。我想 要向左滚动的元素，完成后循环回到开头。

我开始尝试很多事情，但由于我是 flexbox 的新手，我认为我对它与其他内容的交互没有足够坚定的理解，甚至无法尝试可行的解决方案。

function GetAcceptances(value) {
  var acceptances = value;
  $("#tempAcceptanceLoader").remove();
  for (var x = 0; x < acceptances.length; x++) {
    //console.log(acceptances[x].Name);
    $("#recentAcceptances").append(`<div class="slidingText">${acceptances[x].Name}</div>`);
  }
};

#recentAcceptances {
  width: 60%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}

.slidingText {
  flex: 1;
  padding: 0px 5px 0px 5px;
  white-space: nowrap;
  color: black;
  font-size: 18px;
  font-family: 'Oxygen', sans-serif;
  animation: example1 20s infinite linear;
}

@keyframes example1 {
  0% {
    padding-left: 0px;
  }
  100% {
    padding-left: -1000px;
  }
}

<div id="recentAcceptances" class="center">
  <h4 id="tempAcceptanceLoader">Currently loading the list of acceptances...</h4>
</div>

Answer 1

实际填充的计算可能与指定的填充值不同，尤其是 flex layouts .尝试将 transform 与 translateX 一起使用；在元素布局完成后应用变换:

@keyframes example1 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-1000px)
  }
}