javascript - 单击动画进度条

Question

我正在尝试创建一个带有进度指示器的多步骤表单，但我正在努力为进度条制作动画，我想要一个简单的动画，点击它可以将宽度从 0 增加到 100。

我在这里创建了一个副本:https://jsfiddle.net/1zb9p8xo/

这也是我的代码:

$(document).ready(function() {
  $('.next').click(function() {
    $('.current').removeClass('current').hide().next().show().addClass('current');
    $('#progressbar li.active').next().addClass('active');
    if ($('#progress')) {};

  });

  $('.previous').click(function() {
    $('.current').removeClass('current').hide().prev().show().addClass('current');
    $('#progressbar li.active').removeClass('active').prev().addClass('active');
  });
});



$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);
  $(".add-field", $(this)).click(function(e) {
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
  });
  $('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
      $(this).parent('.multi-field').remove();
  });
});

fieldset {
  border: none;
  padding: 0;
}
#helpdeskform {
  position: relative;
}
#helpdeskform .field2,
.field3 {
  display: none;
}
#helpdeskform .action-button {
  width: 100px;
  cursor: pointer;
}
#progressbar {
  overflow: hidden;
  background-color: #f6f6f6;
  counter-reset: step;
  padding: 0;
  box-sizing: border-box;
  color: #f6f6f6!important;
  position: relative;
}
#progressbar li {
  list-style-type: none;
  width: 33.333%;
  height: 100%;
  float: left;
  position: relative;
  color: #f6f6f6;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  width: auto;
  color: transparent;
  display: block;
  background: transparent;
}
#progressbar li.active:before,
#progressbar li.active:after {
  background: #69bd45;
  margin-left: 0px;
  -webkit-transition: width 2s, height 4s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 4s;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id="helpdeskform" action="process.php" method="post">

  <!-- Progress Bar -->
  <ul id="progressbar">
    <li class="active first" style="width: 33.33%;"></li>
    <li class="second"></li>
    <li class="last"></li>
  </ul>

  <fieldset class="field1 current">
    <h2>Dashboard name</h2>
    <!-- Input -->
    <input type="text" name="dashboardName" placeholder="Dashboard name" />
    <!-- Controls -->
    <input type="button" name="next" class="next action-button nextOne" value="Next" />
  </fieldset>

  <fieldset class="field2">
    <h2>Dashboard name</h2>
    <!-- Input -->
    <input type="text" name="dashboardName" placeholder="Dashboard name" />
    <!-- Controls -->
    <input type="button" name="next" class="next action-button nextTwo" value="Next" />
    <input type="button" name="previous" class="previous action-button" value="previous" />
    <button>submit</button>
  </fieldset>

  <fieldset class="field3">
    <h2>Dashboard name</h2>
    <!-- Input -->
    <input type="text" name="dashboardName" placeholder="Dashboard name" />
    <!-- Controls -->
    <input type="button" name="previous" class="previous action-button" value="previous" />
    <button>submit</button>
  </fieldset>

</form>

Answer 1

与其为进度条中的每个步骤创建一个单独的元素，不如使用一个元素，并为其宽度设置动画:

  <!-- Progress Bar -->
  <div id="progressbar">
    <div class="progress"></div>
  </div>

并用一点 CSS 来设计它:

#progressbar .progress {
  height: 20px;
  background: #69bd45;
  width: 0;
  transition: .5s;
}

现在让我们看一下它的JS:

$(document).ready(function() {

  //Number of steps in all
  var steps = 3;

  //Current step
  var current = 1;

  //progress element
  var progress = $('#progressbar .progress');

  //Function to update progress bar's value
  function updateProgress() {
    progress.css("width", 100 / steps * current + "%");
  }

  //Call once on page load to set the initial value
  updateProgress();



  $('.next').click(function() {

    current++;

    $('.current').removeClass('current').hide().next().show().addClass('current');

    updateProgress();

  });

  $('.previous').click(function() {
    current--;
    $('.current').removeClass('current').hide().prev().show().addClass('current');

    updateProgress();
  });
});

如果您熟悉 JS，这很简单。首先，我声明了您想要的步数，以及一个保存当前步的变量。然后我做了一个简单的函数来根据当前步骤更改进度条宽度。

之后，您所要做的就是将当前步骤变量设置为您想要显示的任何步骤，然后调用 updateProgress()。

Updated JSFiddle

$(document).ready(function() {

  //Number of steps in all
  var steps = 3;

  //Current step
  var current = 1;

  //progress element
  var progress = $('#progressbar .progress');

  function updateProgress() {
    progress.css("width", 100 / steps * current + "%");
  }

  updateProgress();



  $('.next').click(function() {

    current++;

    $('.current').removeClass('current').hide().next().show().addClass('current');

    updateProgress();

  });

  $('.previous').click(function() {
    current--;
    $('.current').removeClass('current').hide().prev().show().addClass('current');

    updateProgress();
  });
});



$('.multi-field-wrapper').each(function() {
  var $wrapper = $('.multi-fields', this);
  $(".add-field", $(this)).click(function(e) {
    $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
  });
  $('.multi-field .remove-field', $wrapper).click(function() {
    if ($('.multi-field', $wrapper).length > 1)
      $(this).parent('.multi-field').remove();
  });
});

fieldset {
  border: none;
  padding: 0;
}

#helpdeskform {
  position: relative;
}

#helpdeskform .field2,
.field3 {
  display: none;
}

#helpdeskform .action-button {
  width: 100px;
  cursor: pointer;
}

#progressbar .progress {
  height: 20px;
  background: #69bd45;
  width: 0;
  transition: .5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="helpdeskform" action="process.php" method="post">



  <!-- Progress Bar -->
  <div id="progressbar">
    <div class="progress"></div>
  </div>



  <fieldset class="field1 current">

    <h2>Dashboard name</h2>

    <!-- Input -->
    <input type="text" name="dashboardName" placeholder="Dashboard name" />

    <!-- Controls -->
    <input type="button" name="next" class="next action-button nextOne" value="Next" />

  </fieldset>


  <fieldset class="field2">

    <h2>Dashboard name</h2>

    <!-- Input -->
    <input type="text" name="dashboardName" placeholder="Dashboard name" />

    <!-- Controls -->
    <input type="button" name="next" class="next action-button nextTwo" value="Next" />
    <input type="button" name="previous" class="previous action-button" value="previous" />
    <button>submit</button>

  </fieldset>



  <fieldset class="field3">

    <h2>Dashboard name</h2>

    <!-- Input -->
    <input type="text" name="dashboardName" placeholder="Dashboard name" />

    <!-- Controls -->
    <input type="button" name="previous" class="previous action-button" value="previous" />
    <button>submit</button>

  </fieldset>




</form>