我们可以使用回调函数延迟显示的执行=“无”？

Question

你好，
我想创建一个使用CSS和JavaScript下拉的动画。但是，当显示屏设置为“无”时，动画可能无法正常工作，因为显示属性无法动画。但是，如果我延迟显示属性，它会提供足够的动画来加载。那么，是否有可能通过回调函数延迟同一显示属性的方法？这是我的代码：

function myfun() {
  let dis = document.getElementsByClassName("litems")[0];
  if (dis.style.display == "none") {
    dis.style.display = "block";
    dis.style.animation = "up 2s ease-in 1"
  } else {
    dis.style.animation = "down 2s ease-in 1";
    setTimeout(() => {
      dis.style.display = "none";
    }, 2000)
  }
}

.list ul {
  background: orchid;
  position: absolute;
  display: block;
}

@keyframes up {
  0% {
    top: 0px;
    background: white;
  }
  100% {
    top: 400px;
    background: orange;
  }
}

@keyframes down {
  0% {
    top: 400px;
    background: orange;
  }
  100% {
    top: 0px;
    background: white;
  }
}

  <button onclick="myfun()">Click it to toggle</button>
  <div class="list">
    <ul class="litems">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>
</body>

非常感谢。