为什么未排序列表的最后一个子元素总是不能像预期的那样动画？

Question

我想用普通的JavaScript创建一个简单的可过滤库。我用Codepen制作了一支笔，在其中我对彩色div进行了一些实验。为了制作出更好的javascript代码，它还有很多工作要做，但是有一种奇怪的行为，我无法理解为什么会发生。

奇怪的行为与列表的最后一个子项有关，该子项并不总是按预期进行动画处理。具体来说：

-如果我仅选择“黄色”按钮，则所有过滤的黄色框都会按照预期设置动画。

-如果我先选择“全部”按钮，然后再选择“黄色”按钮，则第10个框不会显示动画。

我尝试了几种不同的方法，但我发现问题出在list的最后一个子项上。例如，我删除了6,7,8,9,10，然后在第五个框中出现了相同的问题。

我也尝试过完全删除CSS子选择器，但怪异的行为仍然存在。

有什么想法可能会发生这种情况吗？

https://codepen.io/FoteiniK/pen/oJmbeJ?editors=1010

const allButton = document.getElementById("all");
const listItems = document.getElementsByClassName("item");
const blueButton = document.getElementById("blue");
const yellowButton = document.getElementById("yellow");
const redButton = document.getElementById("red")
const list = document.getElementById("list");

blueButton.onclick = () => {

  for (let item of listItems) {
    /*reset animation*/
    item.style.animation = " ";
    item.offsetHeight;
    item.style.animation = null;
    item.classList.remove("appear-items", "dissappear");
    item.classList.contains("blue") === false &&
      item.classList.add("dissappear");
  }
  list.classList.add("reorder");
};
yellowButton.onclick = () => {

  for (let item of listItems) {
    item.style.animation = " ";
    item.offsetHeight;
    item.style.animation = null;
    item.classList.remove("dissappear", "appear-items");

    item.classList.contains("yellow") ===
      false && item.classList.add("dissappear");
  }
  list.classList.add("reorder");
};

redButton.onclick = () => {

  for (let item of listItems) {
    item.style.animation = " ";
    item.offsetHeight;
    item.style.animation = null;
    item.classList.remove("dissappear", "appear-items");

    item.classList.contains("red") ===
      false && item.classList.add("dissappear");
  }
  list.classList.add("reorder");
};

allButton.onclick = () => {
  list.classList.remove("reorder");

  for (let item of listItems) {
    item.style.animation = " ";
    item.offsetHeight;
    item.style.animation = null;
    item.classList.remove("dissappear");
    item.classList.add("appear-items");
  }
};

$time:0.6s;
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  background-color: #afafaf;
  margin: 20px;
}

.list {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.item {
  order: 10;
  padding: 30px;
  background-color: #e12345;
  margin: 10px;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  & button {
    padding: 10px;
    margin: 3px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      opacity: 0.6;
    }
  }
}

.reorder {
  // .item{
  //   animation:appear 0.5s;
  // }
  .item:nth-child(1) {
    animation: appear $time ease-in;
    order: 0;
  }
  .item:nth-child(2) {
    animation: appear $time ease-in;
    order: 1;
  }
  .item:nth-child(3) {
    animation: appear $time ease-in;
    order: 2;
  }
  .item:nth-child(4) {
    animation: appear $time ease-in;
    order: 5;
  }
  .item:nth-child(5) {
    animation: appear $time ease-in;
    order: 4;
  }
  .item:nth-child(6) {
    animation: appear $time ease-in;
    order: 2;
  }
  .item:nth-child(7) {
    animation: appear $time ease-in;
    order: 1;
  }
  .item:nth-child(8) {
    animation: appear $time ease-in;
    order: 0;
  }
  .item:nth-child(9) {
    animation: appear $time ease-in;
    order: 0;
  }
  .item:nth-child(10) {
    animation: appear $time ease-in;
    order: 1;
  }
}

.appear-items {
  animation: appear 0.5s;
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1);
  }
  20% {
    opacity: 0.2;
    transform: scale3d(0.2, 0.2, 0.2);
  }
  40% {
    opacity: 0.4;
    transform: scale3d(0.4, 0.4, 0.4);
  }
  60% {
    opacity: 0.6;
    transform: scale3d(0.6, 0.6, 0.6) translateY(0);
  }
  80% {
    opacity: 0.8;
    transform: scale3d(0.8, 0.8, 0.8);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.dissappear {
  display: none;
}

<div class="container">
  <div class="buttons">
    <button class="all but" id="all">all</button>
    <button class="blue but" id="blue">blue</button>
    <button class="yellow but" id="yellow">yellow</button>
    <button class="red but" id="red">red</button>
  </div>
  <ul class="list" id="list">
    <li class="item blue">1</li>
    <li class="item red">2</li>
    <li class="item yellow">3</li>
    <li class="item red">4</li>
    <li class="item yellow">5</li>
    <li class="item red">6</li>
    <li class="item yellow">7</li>
    <li class="item blue">8</li>
    <li class="item red">9</li>
    <li class="item yellow">10</li>
  </ul>
</div>