动态表单进度条动画的优化实现教程-html教程-PHP中文网

动态表单进度条动画的优化实现教程

本教程旨在解决使用单选按钮组更新动画进度条时遇到的挑战，特别是关于累加百分比而非固定宽度跳转的问题，以及事件监听器的重复触发。我们将通过引入CSS过渡效果和基于data-progress属性的JavaScript动态计算，实现一个结构清晰、逻辑健壮、动画流畅且易于扩展的进度条更新方案。

引言

在Web项目中，常见需求是根据用户交互（如选择单选按钮）动态更新页面元素。对于进度条而言，这通常意味着当用户做出选择时，进度条的填充程度会相应变化。然而，如果处理不当，可能会出现动画不流畅、进度值无法累加、或事件监听器重复绑定等问题。本教程将展示如何通过优化HTML结构、CSS样式和JavaScript逻辑，实现一个响应式且动画效果出色的动态进度条。

原始实现中的问题分析

最初的实现尝试通过为每个单选按钮的点击事件绑定不同的CSS类来控制进度条的动画。这种方法存在以下几个主要问题：

动画非累加性与重置： 每个CSS类（如progress-value-1a、progress-value-2a等）都定义了独立的@keyframes动画，这些动画通常是从一个固定宽度开始到另一个固定宽度结束。这意味着当用户从一个选项切换到另一个选项时，进度条可能会先重置到某个起始点，然后再动画到新的目标宽度，而不是从当前状态平滑地过渡到新状态，也无法实现多个选项贡献的累加效果。
CSS规则冗余： 针对每个可能的进度状态都需要定义一个独立的@keyframes规则和对应的CSS类，这导致CSS代码量大且难以维护。
事件监听器重复绑定： JavaScript代码中使用了document.addEventListener('click', ...)来绑定函数，而这些函数内部又包含了$(document).ready(function() { ... });和$("#jsX").click(function() { ... });。这种模式会导致每次点击页面时，都会尝试重新绑定一次单选按钮的点击事件，从而造成事件监听器重复绑定，导致行为异常或性能下降。
缺乏灵活性： 每次新增或修改进度选项时，都需要同步修改JavaScript和CSS代码，扩展性差。

优化方案：基于CSS过渡和JavaScript动态计算

为了解决上述问题，我们将采用一种更简洁、高效且易于维护的方法：

利用CSS transition 实现平滑动画： 移除所有冗余的@keyframes规则，仅使用一个CSS transition 属性来声明进度条宽度变化时的动画效果。
HTML data-progress 属性定义贡献值： 在每个单选按钮上添加一个 data-progress 属性，用于存储该选项对总进度贡献的百分比值。
JavaScript 动态计算总进度： 编写一段JavaScript代码，监听所有单选按钮的 change 事件。当任何单选按钮状态改变时，遍历所有已选中的单选按钮，累加它们的 data-progress 值，然后将这个总和作为进度条的宽度。

具体实现步骤

1. HTML 结构调整

在HTML中，我们需要为每个单选按钮添加一个 data-progress 属性，表示该选项所贡献的进度百分比。同时，移除 label 元素上的 onclick 属性，因为我们将通过JavaScript统一管理事件监听。

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- 注意：jQuery 1.4.4 版本较老，生产环境中建议使用更新版本 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>

<body>
  <div class="wrappy">
    Speed
    <div class="progress">
      <div class="progress-value"></div>
    </div>
  </div>

  <div class="row">
    <label>Group 1</label>
    <div class="col-6">
      <!-- 添加 data-progress 属性，并设置默认选中项 -->
      <input type="radio" style="display:none;" id="js1" data-price="146.99" value="option1a" name="ONE" data-progress="50" checked>
      <label for="js1">
        Option 1a (Default 50%)
      </label>
    </div>
    <div class="col-6">
      <input type="radio" style="display:none;" id="js2" data-price="123.99" value="option2a" name="ONE" data-progress="75">
      <label for="js2">
        Option 2a (75%)
      </label>
    </div>

    <hr style="margin-top:24px;">

    <label>Group 2</label>

    <div class="col-6">
      <input type="radio" style="display:none;" id="js3" data-price="116.99" value="option1b" name="TWO" data-progress="0">
      <label for="js3">
        Option 1b (Default 50%, but if option 2a selected then stay 75%)
      </label>
    </div>
    <div class="col-6">
      <input type="radio" style="display:none;" id="js4" data-price="93.99" value="option2b" name="TWO" data-progress="10">
      <label for="js4">
        Option 2b (Should increase from group 1 selection)
      </label>
    </div>
  </div>

  <!-- bootstrap.bundle.min.js 应该放在所有内容之后，</body> 标签之前 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

登录后复制

关键改动：

爱图表

AI驱动的智能化图表创作平台

查看详情

data-progress 属性：为每个 input[type="radio"] 添加，其值代表该选项对总进度的贡献百分比。
checked 属性：为默认选中的单选按钮添加 checked，确保页面加载时有初始进度。
移除 label 上的 onclick：事件监听将通过JavaScript统一处理。

2. CSS 样式优化

我们将移除所有冗余的 @keyframes 动画定义，只保留一个 transition 属性在 .progress-value 类上，使其在宽度变化时自动平滑过渡。

body {
  padding: 12px;
}

.col-6 label {
  border: 1px solid #333;
}

.col-6 input[type=radio]:checked+label {
  border: 2px solid blue;
}

.progress {
  background: rgba(255, 255, 255, 0.1);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  display: flex;
  height: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.progress-value {
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #0d6efd;
  height: 30px;
  width: 0; /* 初始宽度设为0，由JS动态控制 */
  transition: width 2s; /* 添加过渡效果，使宽度变化时有2秒的动画 */
}

登录后复制

关键改动：

移除所有 progress-value-X 相关的类和 @keyframes 规则。
在 .progress-value 类中添加 transition: width 2s;，这告诉浏览器当 width 属性发生变化时，在2秒内平滑地过渡到新值。

3. JavaScript 逻辑实现

JavaScript代码将负责监听单选按钮的 change 事件，计算所有选中项的 data-progress 总和，并据此更新进度条的宽度。

$(document).ready(function() {
  // 缓存所有单选按钮的jQuery对象
  const $radios = $('input[type="radio"]');
  const $progressBar = $(".progress-value");

  // 绑定change事件监听器到所有单选按钮
  $radios.change(function() {
    let progress_value = 0; // 初始化总进度值
    // 遍历所有被选中的单选按钮
    $('input[type="radio"]:checked').each(function() {
      // 获取当前选中按钮的data-progress值并累加
      // 使用Number()确保数据类型为数字进行计算
      progress_value += Number($(this).data('progress'));
    });

    console.log("Current Progress:", progress_value + '%');
    // 设置进度条的宽度，触发CSS过渡动画
    $progressBar.width(progress_value + '%');
  });

  // 页面加载时，手动触发一次change事件，以显示初始进度
  // 这样可以确保如果页面加载时有默认选中的单选按钮，进度条也能正确显示
  $($radios[0]).change();
});

登录后复制

关键改动：

$(document).ready()： 确保DOM完全加载后再执行脚本。
$radios.change(function() { ... });： 使用jQuery的 .change() 方法监听所有单选按钮的 change 事件。这个事件在单选按钮状态改变时（即被选中或取消选中）触发。
$('input[type="radio"]:checked').each(function() { ... });： 遍历所有当前被选中的单选按钮。
progress_value += Number($(this).data('progress'));： 获取每个选中单选按钮的 data-progress 属性值，并将其累加到 progress_value 变量中。Number() 函数用于将字符串类型的 data-progress 值转换为数字，以便进行数学运算。
$(".progress-value").width(progress_value + '%');： 将计算出的总进度值赋给进度条元素的 width 属性。由于CSS中设置了 transition: width 2s;，这里的宽度变化将以平滑的动画形式展现。
$($radios[0]).change();： 在脚本初始化时，手动触发第一个单选按钮的 change 事件。这确保了如果页面加载时有预设的 checked 状态的单选按钮，进度条也能立即显示正确的初始进度。

总结与注意事项

通过上述优化，我们实现了一个功能完善、动画流畅且易于维护的动态进度条：

累加百分比： 进度条的宽度现在是所有选中单选按钮 data-progress 值的总和，完美解决了非累加性问题。
平滑动画： CSS transition 属性使得宽度变化过程自然平滑，无需复杂的 @keyframes。
简洁高效： JavaScript代码只需一个事件监听器，逻辑清晰，易于理解和调试。
可扩展性强： 增加或修改选项时，只需调整HTML中的 data-progress 属性，无需修改CSS或JavaScript核心逻辑。

注意事项：

jQuery版本： 示例代码使用了较老的jQuery 1.4.4。在实际项目中，建议使用最新稳定版本的jQuery，或考虑使用原生JavaScript实现以减少依赖。
data-progress 值： 确保 data-progress 属性的值是有效的数字，否则 Number() 转换可能导致 NaN，影响计算结果。
默认选中状态： 确保至少有一个单选按钮在页面加载时处于 checked 状态，或者在JavaScript中处理没有默认选中项的情况，以避免进度条初始为空。
可访问性： 虽然示例中隐藏了原生单选按钮，但通过 label for 关联，仍然保持了良好的可访问性。确保自定义样式不会损害屏幕阅读器等辅助技术的使用。
CSS过渡时间： transition: width 2s; 中的 2s 可以根据需要调整动画的速度。

这个优化方案不仅解决了原始问题，还提供了一个更符合现代Web开发实践的解决方案，使得动态进度条的实现更加健壮和灵活。

以上就是动态表单进度条动画的优化实现教程的详细内容，更多请关注php中文网其它相关文章！