javascript - 如何在javascript中设置循环

标签 javascript jquery css-transitions

我想在此代码中设置循环。我该怎么做？

这是一个插件，我想让这个插件持续显示效果。为此，我必须使用某种循环。但我不知道该怎么做。

var steps = $(".step");
console.dir(steps);

setTimeout(function() {
    steps.each(function(index) {
        var _t = $(this);
        setTimeout(function() {
            _t.addClass('done');
        }, 1250 * index * 1.5);
    });
}, 500);
body {
    font-family: 'Roboto Condensed';
    height: 700px;
    width: 100vw;
    padding: 0;
    background-image: -webkit-radial-gradient(#051b23, #04141a);
    background-image: radial-gradient(#051b23, #04141a);
}
h1 {
    color: #fcb034;
    text-align: center;
    font-size: 7vw;
    margin-top: 10vh;
    letter-spacing: 3px;
    position: absolute;
    width: 100%;
}
.icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    fill: none;
}
.hidden {
    display: none;
}
.progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 80% 0 0 10%;
}
.step {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
}
.step-progress {
    width: 100%;
    height: 0.25em;
    background: #fcb034;
}
.icon-wrapper {
    text-align: center;
    display: inline-block;
}
.step.done .step-progress:after {
    position: absolute;
    content: '';
    height: 0.25em;
    width: 0;
    background-color: #0087B3;
    -webkit-animation: growLine 1s linear forwards;
    animation: growLine 1s linear forwards;
}
.icon-checkmark {
    position: absolute;
    top: -0.55em;
    left: -0.125em;
    border: 0.125em solid #fcb034;
    background: #051B23;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    padding: 0.125em;
    border-radius: 50%;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.step.done .icon-checkmark {
    background: #0087B3;
    border-color: #0087B3;
}
.icon-checkmark .path1 {
    stroke: #aaa;
    stroke-width: 4;
    stroke-linecap: square;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    fill: empty;
}
.step.done .icon-checkmark .path1 {
    -webkit-animation: dash 5s linear forwards;
    animation: dash 5s linear forwards;
    stroke: #fcb034;
}
.step-text {
    position: relative;
    margin-left: -50%;
    letter-spacing: 1px;
    font-weight: bold;
    color: #aaa;
    margin-top: 0;
    opacity: 0;
}
.step.done .step-text {
    color: #0087B3;
    -webkit-animation: dropText 0.5s linear forwards;
    animation: dropText 0.5s linear forwards;
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes growLine {
    to {
        width: 100%;
    }
}
@keyframes growLine {
    to {
        width: 100%;
    }
}
@-webkit-keyframes dropText {
    to {
        padding-top: 1em;
        opacity: 1;
    }
}
@keyframes dropText {
    to {
        padding-top: 1em;
        opacity: 1;
    }
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Step Progress Bar</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>

    <link rel="stylesheet" href="css/style.css">


</head>

<body>
    <h1>PROGRESS BAR</h1>

    <div class="progress">
        <div class="step">
            <div class="step-progress"></div>
            <div class="icon-wrapper">
                <svg class="icon icon-checkmark" viewBox="0 0 32 32">
                    <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
                </svg>
                <div class="step-text">ENROLLED</div>
            </div>
        </div>
        <div class="step">
            <div class="step-progress"></div>
            <div class="icon-wrapper">
                <svg class="icon icon-checkmark" viewBox="0 0 32 32">
                    <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
                </svg>
                <div class="step-text">APPLIED</div>
            </div>
        </div>
        <div class="step">
            <div class="step-progress"></div>
            <div class="icon-wrapper">
                <svg class="icon icon-checkmark" viewBox="0 0 32 32">
                    <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
                </svg>
                <div class="step-text">CONFIRMED</div>
            </div>
        </div>
        <div class="step">
            <div class="icon-wrapper">
                <svg class="icon icon-checkmark" viewBox="0 0 32 32">
                    <path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
                </svg>
                <div class="step-text">DONE!</div>
            </div>
        </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>

</html>

最佳答案

下面对您的 JavaScript 的编辑允许动画无限循环。

总结:

  • 我已将您的 JavaScript 分解为两个独立的函数 - animate 和 reset
  • 在 animate 中，我们检查何时遍历最后的 step 元素，并在发生这种情况时调用 reset 函数<
  • 在 reset 中，我们从每个元素中删除 done 类，然后再次调用 animate 函数

var steps = $(".step");
// Find out the number of '.step' items in DOM and
// decrement count by 1 so that we can count from 0.
var stepsCount = steps.length - 1;
//console.dir(steps);

function animate () {
  setTimeout(function() {
    steps.each(function(index) {
      var _t = $(this);
      setTimeout(function() {
        _t.addClass('done');

        if (index === stepsCount) {
          setTimeout(function() {
            // If we've reached the final item call the reset function after a 2 sec delay,
            // so that the user can see the animation in its end state before we restart.
            reset();
          }, 2000);
        }
      }, 1250*index*1.5);
    });
  }, 500);
}

function reset () {
  // Iterate over DOM and remove `.done`
  steps.each(function(index) {
    var _t = $(this);
    _t.removeClass('done');
  });
  
  // Start the animation again
  animate();
}

animate(); // Initial call to animate
body {
  font-family: 'Roboto Condensed';
  height:700px;
  width: 100vw;
  padding: 0;
  background-image: -webkit-radial-gradient(#051b23, #04141a);
  background-image: radial-gradient(#051b23, #04141a);
}

h1 {
  color: #fcb034;
  text-align: center;
  font-size: 7vw;
  margin-top: 10vh;
  letter-spacing: 3px;
  position: absolute;
  width: 100%;
}

.icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  fill: none;
}

.hidden {
  display: none;
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  margin: 80% 0 0 10%;
}

.step {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative;
}

.step-progress {
  width: 100%;
  height: 0.25em;
  background: #fcb034;
}

.icon-wrapper {
  text-align: center;
  display: inline-block;
}

.step.done .step-progress:after {
  position: absolute;
  content: '';
  height: 0.25em;
  width: 0;
  background-color: #0087B3;
  -webkit-animation: growLine 1s linear forwards;
          animation: growLine 1s linear forwards;
}

.icon-checkmark {
  position: absolute;
  top: -0.55em;
  left: -0.125em;
  border: 0.125em solid #fcb034;
  background: #051B23;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  padding: 0.125em;
  border-radius: 50%;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.step.done .icon-checkmark {
  background: #0087B3;
  border-color: #0087B3;
}

.icon-checkmark .path1 {
  stroke: #aaa;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill: empty;
}

.step.done .icon-checkmark .path1 {
  -webkit-animation: dash 5s linear forwards;
          animation: dash 5s linear forwards;
  stroke: #fcb034;
}

.step-text {
  position: relative;
  margin-left: -50%;
  letter-spacing: 1px;
  font-weight: bold;
  color: #aaa;
  margin-top: 0;
  opacity: 0;
}

.step.done .step-text {
  color: #0087B3;
  -webkit-animation: dropText 0.5s linear forwards;
          animation: dropText 0.5s linear forwards;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes growLine {
  to {
    width: 100%;
  }
}
@keyframes growLine {
  to {
    width: 100%;
  }
}
@-webkit-keyframes dropText {
  to {
    padding-top: 1em;
    opacity: 1;
  }
}
@keyframes dropText {
  to {
    padding-top: 1em;
    opacity: 1;
  }
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Step Progress Bar</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>PROGRESS BAR</h1>

<div class="progress">
  <div class="step">
    <div class="step-progress"></div>
    <div class="icon-wrapper">
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>  </svg>
      <div class="step-text">ENROLLED</div>
    </div>
  </div>
  <div class="step">
    <div class="step-progress"></div>
    <div class="icon-wrapper">
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>  </svg>
      <div class="step-text">APPLIED</div>
    </div>
  </div>
  <div class="step">
    <div class="step-progress"></div>
    <div class="icon-wrapper">
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>  </svg>
      <div class="step-text">CONFIRMED</div>
    </div>
  </div>
  <div class="step">
    <div class="icon-wrapper">
      <svg class="icon icon-checkmark" viewBox="0 0 32 32"><path class="path1" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>  </svg>
      <div class="step-text">DONE!</div>      
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

关于javascript - 如何在javascript中设置循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42151395/

上一篇：javascript - Vuejs 中的属性突变

下一篇：javascript - 如何使用 HTML5 Fetch API 修复 React Js 中的 OpenWeather API 不透明响应

相关文章：

javascript - 即时添加 Javascript

javascript - 如何测试 $rootScope.$emit 事件的动态名称？

javascript - Highcharts X 轴对齐

javascript - 在选择之前检测自动完成建议选项

twitter-bootstrap - twitter bootstrap 支持的转换类名是什么？

javascript - 在 ReactJS 中将数组传递给另一个函数

javascript - @font-face，Javascript 与 CSS

javascript - Knockout JS foreach 循环中的非重复元素

css - 如何同时转换多个元素的属性

CSS 过渡效果::文本改变颜色，但不改变边框

©2024 IT工具网  联系我们