如何在Bootstrap中独立地为多个进度条部分添加动画效果？

Question

我有一些Bootstrap代码，在用户查看时可以完美地动画化进度条部分。

然而，它会动画化页面中所有的进度条，而不是只动画化那个被查看的部分的进度条。因此，当用户到达另一个进度条部分时，这些进度条已经被动画化了，他看不到任何动画效果。

我的问题是：如何修改下面的代码，使不同的部分在被浏览时能够独立地进行动画化呢？

CSS

#skills {
  padding: 60px 0;
}

#skills .progress {
  height: 35px;
  margin-bottom: 10px;
}

#skills .progress .skill {
  font-family: "Open Sans", sans-serif;
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}

#skills .progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

#skills .progress-bar {
  width: 1px;
  text-align: left;
  transition: .9s;
}

JS

// Skills section
$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

HTML

<!-- The first section of progress bars somewhere in the page -->
<section id="skills">
  <div class="skills-content">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
    </div>
  </div>
</section>

<!-- Another section of progress bars further down the page -->
<section id="skills">
  <div class="skills-content">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
    </div>
  </div>
</section>

- michael

---

将id="skills"更改为class="skills"，并相应更新您的js代码。 - karthick

Answer 1

我刚刚注意到你没有正确关闭你的

元素和其他标签。

<section class="skills">
    <div class="skills-content">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset 1 - Skill 1 <i class="val"></i></span>
        </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset 1 - Skill 2 <i class="val"></i></span>
        </div>
    </div>
</section>

<!-- Another section of progress bars further down the page -->
<section class="skills">
    <div class="skills-content">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset N - Skill 1 <i class="val"></i></span>
        </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset N - Skill 2 <i class="val"></i></span>
        </div>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- valuemax="100">
            </div>
            <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
        </div>
    </div>
</section>

当您的航点函数调用时，应该调用所有进度元素，而不仅仅是子进度元素。

$('#skills').waypoint(function() {
  $('.progress .progress-bar').each(function() { // <- you are getting all progress elements
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

更改为

$('.skills').waypoint(function () {
   var el = this.element;
   var children = $(el).find(".progress-bar");
   $(children).each(function () { // <- make sure getting only children elements
        $(this).css("width", $(this).attr("aria-valuenow") + '%');
   });
}, { offset: '80%' });

确保在页面加载时（不在视口内），其他技能部分不会被用户查看。

- Onur Gelmez

---

同时将 #skills 转换为 .skills，OP 拥有多个技能部分。 - karthick

这个不起作用，没有动画。我按照@karthick的建议将“#skills”更改为“.skills”，但仍然没有动画。 - michael

@michael 代码已经编辑并测试过了，你可以尝试一下。 - Onur Gelmez

好的，现在它可以工作了，值得在悬赏中指出解决方案必须能够工作 :) 非常感谢！ - michael

Answer 2

如果您在HTML中使用不同的类，然后在需要时逐个初始化不同的类，则应该可以正常工作

    <div class="progress">
      <div class="progress-bar progress-bar-1" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria- 
   valuemax="100"></div>
        <span class="skill">Skillset N - Skill 3 <i class="val"></i></span>
      </div>
    </div>

$('#skills').waypoint(function() {
  $('.progress-bar.progress-bar-1').each(function() {
    $(this).css("width", $(this).attr("aria-valuenow") + '%');
  });
}, { offset: '80%'} );

- Nils M.

---

感谢您的回答。我无法为每个要添加的进度条修改JavaScript文件，这将违反HTML、CSS和JS的可分离性。@onur-gelmez的解决方案在这方面是好的，尽管它并不起作用... - michael