如何实现点击按钮时触发+1向上漂浮并渐隐的动画效果

核心思路 #

• 用CSS关键帧动画实现数值上移、透明度渐变消失的效果
• 每次点击生成浮动数值元素时绑定动画类，动画结束后自动删除元素避免DOM堆积

完整可运行代码 #

CSS 部分 #

* {
  margin: 0;
  padding: 0;
}

#moneyAnimation {
  height: 500px;
  border: 1px solid;
  width: 200px;
  float: right;
  position: relative;
}

/* 浮动数值的基础样式 */
.float-number {
  position: absolute;
  bottom: 20px;
  right: 50%;
  transform: translateX(50%);
  color: #f60;
  font-weight: bold;
  font-size: 18px;
  pointer-events: none;
  /* 绑定上浮动画，时长1.2秒，结束后保持最终帧状态 */
  animation: floatUp 1.2s forwards ease-out;
}

/* 定义上浮动画 */
@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateX(50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(50%) translateY(-80px) scale(1.2);
  }
}

JS 部分 #

var money = 0;
var currentMoney = document.getElementById("currentMoney");
var animationContainer = document.getElementById("moneyAnimation");

function addOne() {
  money++;
  currentMoney.innerHTML = money;
  
  var moneyAnimation = document.createElement("p");
  moneyAnimation.innerHTML = "+1";
  // 给元素加浮动动画类
  moneyAnimation.classList.add("float-number");
  animationContainer.appendChild(moneyAnimation);
  
  // 动画结束后自动删除当前元素，避免DOM冗余
  moneyAnimation.addEventListener('animationend', () => {
    moneyAnimation.remove();
  });
}

HTML 部分 #

<button onclick="addOne();">+1$</button>
<p>Money: <b id="currentMoney">0</b>$</p>

<div id="moneyAnimation"></div>

效果调整说明 #

如果要修改动画的浮动距离、速度、样式，直接调整@keyframes floatUp里的参数即可：

• 调整animation的时长数值可以改变动画快慢
• 调整translateY(-80px)里的数值可以修改上浮的高度
• 修改scale(1.2)的数值可以调整上浮过程中的放大效果
• 修改.float-number的颜色、字号可以调整浮动数值的显示样式

内容的提问来源于stack exchange，提问作者user16262715