按钮进度条添加弹跳动画效果的实现求助

实现思路 #

• 用CSS @keyframes 定义弹跳动画：让进度条宽度从100%短暂缩至90%，再恢复到100%
• 监听输入变化，当所有4个输入框都填满时，给按钮添加动画类触发效果；有输入框清空时移除动画类
• 调整背景渐变的设置逻辑，兼容动画状态

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Progress Bar Example</title>
  <style>
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 50px;
    }

    label {
      margin: 10px;
    }

    input[type="text"] {
      margin-left: 10px;
    }

    input[type="submit"] {
      margin-top: 30px;
      background-color: white;
      color: black;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      width: 200px;
      position: relative;
      /* 保持进度变化平滑 */
      transition: background 0.2s ease;
    }

    /* 定义弹跳动画 */
    @keyframes progressBounce {
      0% {
        background-position: 100% 0;
      }
      50% {
        background-position: 90% 0;
      }
      100% {
        background-position: 100% 0;
      }
    }

    /* 动画触发类 */
    .submit-btn--bounce {
      animation: progressBounce 0.6s ease-in-out;
    }
  </style>
</head>
<body>
<form>
  <label>
    Input 1:
    <input type="text" id="input1">
  </label>
  <label>
    Input 2:
    <input type="text" id="input2">
  </label>
  <label>
    Input 3:
    <input type="text" id="input3">
  </label>
  <label>
    Input 4:
    <input type="text" id="input4">
  </label>
  <input type="submit" id="submitBtn" value="Submit">
</form>

<script>
  const inputs = [document.getElementById("input1"), document.getElementById("input2"), document.getElementById("input3"), document.getElementById("input4")];
  const submitBtn = document.getElementById("submitBtn");

  inputs.forEach((input) => {
    input.addEventListener("input", updateProgress);
  });

  function updateProgress() {
    const completedInputs = inputs.filter(input => input.value.trim() !== "");
    const percentageComplete = completedInputs.length / 4;
    const colorWidth = Math.floor(percentageComplete * submitBtn.clientWidth);
    
    // 设置基础进度背景
    submitBtn.style.background = `linear-gradient(90deg, #20ff0c ${colorWidth}px, rgba(0, 0, 0, 0) ${colorWidth}px)`;

    // 处理弹跳动画逻辑
    if (completedInputs.length === 4) {
      // 先移除再添加类，强制重新触发动画（支持清空后再次填满时重复触发）
      submitBtn.classList.remove('submit-btn--bounce');
      void submitBtn.offsetWidth; // 触发浏览器重绘，解决动画不重复执行问题
      submitBtn.classList.add('submit-btn--bounce');
    } else {
      submitBtn.classList.remove('submit-btn--bounce');
    }
  }
</script>
</body>
</html>

关键修改说明 #

1. CSS动画实现：

   • 通过progressBounce关键帧动画改变背景渐变的位置，模拟进度条的弹跳效果，时长0.6秒的缓动曲线让动画更自然
   • 新增submit-btn--bounce类用于绑定动画，方便JS控制触发时机

2. JavaScript逻辑优化：

   • 统一输入框集合变量，简化代码结构
   • 封装updateProgress函数，集中处理进度计算、背景更新和动画触发逻辑
   • 用trim()判断输入内容，避免空字符被误判为已填写
   • 通过移除再添加动画类+强制重绘的方式，确保每次填满所有输入框时都能触发弹跳动画

3. 细节优化：

   • 给按钮添加背景过渡效果，让日常进度变化更平滑

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