我尝试使用这些代码来制作浮动文本动画。

const button = document.querySelector('.mainButton');
const popUpContainer = document.getElementById('popUpContainer');

button.addEventListener('click', function(event) {
  const popUpText = document.createElement('span');
  popUpText.textContent = '1+';
  popUpText.classList.add('popUpText');
  const x = event.clientX - popUpContainer.getBoundingClientRect().left;
  const y = event.clientY - popUpContainer.getBoundingClientRect().top - 50;
  popUpText.style.left = `${x}px`;
  popUpText.style.top = `${y}px`;

  popUpContainer.appendChild(popUpText);

  setTimeout(function() {
    popUpText.remove();
  }, 2000);
});

.popUpContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.popUpText {
  position: absolute;
  color: white;
  font-size: 20px;
  animation: popUpAnimation 2s linear;
  top: 50px;
}

@keyframes popUpAnimation {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}

<div id="popUpContainer"></div>
<button class="mainButton">click me</button>

更具体地说，我想在单击按钮后出现并向上浮动的按钮旁边制作一个动画，就像单击按钮后的效果一样。但在它向上漂浮2秒后，它停止并消失。我尝试使用上面提供的代码。
我可能是愚蠢的，没有一些对一个（或所有）代码至关重要的东西。我为我做出的任何不明智的行为道歉。
侧记：HTML部分很短，我知道，还有更多的，只是问如果需要。