CSS中的技能栏[重复]答案

【问题标题】：Skills Bar in CSS [duplicate]CSS中的技能栏[重复]
【发布时间】：2021-05-07 05:23:25
【问题描述】：

我的动画有点不一致，我尝试修复它，但它没有工作，即使它应该很简单。

这是代码：

//Skills Animation On View
document.addEventListener("DOMContentLoaded", function(event) {

// THIS FUNCTION GETS CALLED WHENEVER A SPAN18 ELEMENT (OR ELEMENTS) COME INTO OR GO OUT OF VIEW
      function callback (observations, observer) {
        observations.forEach(observation => {
          if (observation.isIntersecting) { //IF IT'S IN VIEW
            observation.target.classList.add('animated');
            observation.target.classList.add('animated1');
          }
          else {
            observation.target.classList.remove('animated');
            observation.target.classList.remove('animated1');
          }      
       });
     }
      
      // CREATE AN INTERSECTION OBSERVER
      let options = {
         root: null, //null means it will observe on the viewport
         rootMargin: '0px',
         threshold: 1.0 //1 means the whole element needs to be viewable before we animate it
      }

      let observer = new IntersectionObserver(callback, options);
      
      // NOW PUT THE OBSERVER ON EACH OF THE ELEMENTS WE WANT TO ANIMATE WHEN IT'S IN VIEW
      let spans = document.querySelectorAll('span18');
      for (let i=0; i< spans.length; i++) {
        observer.observe(spans[i]); 
      }
      let spans1 = document.querySelectorAll('span19');
      for (let a=0; a< spans1.length; a++) {
        observer.observe(spans1[a]); 
      }
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body20{
  height: 100%;
  place-items: center;
  background: transparent;
}
::selection{
  color: #fff;
  background: black;
}
.skill-bars{
  padding: 25px 30px;
  width: 97%;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
  border-radius: 10px;
}
.skill-bars .bar{
  margin: 20px 0;
}
.skill-bars .bar:first-child{
  margin-top: 0px;
}
.skill-bars .bar .info{
  margin-bottom: 5px;
}
.skill-bars .bar .info span18{
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100%{
    opacity: 1;
  }
}
.skill-bars .bar .progress-line{
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
              0 1px rgba(255,255,255,0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}

.bar .progress-line span18{
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
}
/* SET THE ANIMATED CLASS TO GET IT TO ANIMATE */
.bar .progress-line span18.animated{
    animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18{
  width: 84%;
}
.bar .progress-line.css span18{
  width: 76%;
}
.bar .progress-line.jquery span18{
  width: 91%;
}
.bar .progress-line.python span18{
  width: 59%;
}
.bar .progress-line.mysql span18{
  width: 70%;
}
/* ADDED ANIMATED HERE SO ANIMATES ONLY WHEN IN THE VIEWPORT */
.progress-line span18.animated::before{
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18.animated::after{
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
  100%{
    opacity: 1;
  }
}
.progress-line.html span18::after{
  content: "84%";
}
.progress-line.css span18::after{
  content: "76%";
}
.progress-line.jquery span18::after{
  content: "91%";
}
.progress-line.python span18::after{
  content: "59%";
}
.progress-line.mysql span18::after{
  content: "70%";
}


/* -----------------second box------------------------- */

.skill-bars1 {
  padding: 25px 30px;
  width: 97%;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.skill-bars1 .bar1 {
  margin: 20px 0;
}

.skill-bars1 .bar1:first-child {
  margin-top: 0px;
}

.skill-bars1 .bar1 .info1 {
  margin-bottom: 5px;
}

.skill-bars1 .bar1 .info1 span19 {
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100% {
    opacity: 1;
  }
}

.skill-bars1 .bar1 .progress-line1 {
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.bar1 .progress-line1 span19 {
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
}
.bar1 .progress-line1 span19.animated1{
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;

}

.bar1 .progress-line1.html1 span19 {
  width: 61%;
}

.bar1 .progress-line1.css1 span19 {
  width: 50%;
}

.bar1 .progress-line1.jquery1 span19 {
  width: 68%;
}

.bar1 .progress-line1.python1 span19 {
  width: 82%;
}

.bar1 .progress-line1.mysql1 span19 {
  width: 98%;
}

.progress-line1 span19::before {
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

.progress-line1 span19::after {
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

@keyframes showText2 {
  100% {
    opacity: 1;
  }
}

.progress-line1.html1 span19::after {
  content: "61%";
}

.progress-line1.css1 span19::after {
  content: "50%";
}

.progress-line1.jquery1 span19::after {
  content: "68%";
}

.progress-line1.python1 span19::after {
  content: "82%";
}

.progress-line1.mysql1 span19::after {
  content: "98%";
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <section>
        <div class="container" data-aos="fade-up">
      <div class="section-title">
        <h2>What I am Working On</h2>
        </div>
    <link rel="stylesheet" href="assets/css/picturealign.css"> 
      <div class="column1">
      <div class="row1">
  <div class="skill-bars">
    <div class="bar">
      <div class="info">
        <span18>Harvard CS50 Course</span18>
      </div>
      <div class="progress-line html">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Youtube Channel (Java Tutorials)</span18>
      </div>
      <div class="progress-line css">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>C++</span18>
      </div>
      <div class="progress-line jquery">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Java</span18>
      </div>
      <div class="progress-line python">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Web Development (Front-End)</span18>
      </div>
      <div class="progress-line mysql">
        <span18></span18>
      </div>
    </div>
  </div>
            </div>
      </div>
      </div>
      <!-- second box -->
      <div class="container" data-aos="fade-up">
    <link rel="stylesheet" href="assets/css/picturealign.css"> 
       <div class="column1">
      <div class="row1">
  <div class="skill-bars1">
    <div class="bar1">
      <div class="info1">
        <span19>Competitive Chess (School Club)</span19>
      </div>
      <div class="progress-line1 html1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Basketball</span19>
      </div>
      <div class="progress-line1 css1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>GitHub Side Projects</span19>
      </div>
      <div class="progress-line1 jquery1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Computer Science and Math Tutoring</span19>
      </div>
      <div class="progress-line1 python1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>University Supplementary Applications &#128522</span19>
      </div>
      <div class="progress-line1 mysql1">
        <span19></span19>
      </div>
    </div>
  </div>
            </div>
      </div>
    </section>
    <script src="script.js"></script>
  </body>
</html>

所以First box/skills bar 首先工作得很好，栏动画和然后黑色横幅出现，但Second box/skills bar 不像第一个框那样工作，因为栏动画与横幅。黑色横幅没有像first box 中那样的动画。我希望Second box/skills bar 中的栏先进行动画处理，然后像First box/skills bar 中一样立即出现黑色横幅。

简而言之，我只想让Second Box/skills bar 像First box/skills bar 一样工作。有什么建议吗？

这个问题与我之前发布的问题不同，任何类似的问题我都已删除，所以请不要关闭此帖子。谢谢！

【问题讨论】：

你说“我想让第二个盒子里的栏像第一个一样动画”，但你说“我只想让第一个盒子/技能栏像第二个盒子一样工作” ——那么您是希望第一个像第二个一样工作，还是希望第二个像第一个一样工作？
意思是一样的，我希望第一个框像第二个框一样工作，这意味着首先条形动画然后出现横幅。
当我运行您的代码 sn-p 第一个框，以“哈佛 CS50 课程”开头的框，动画栏，然后出现横幅。 second 框，以“国际象棋”开头的框，将条形图和横幅动画化在一起。我在 First 框中看到“首先是条形动画，然后出现横幅”，但在您上面的评论中，您说这就是 second 盒子可以。
所以第二个框的工作方式与您所说的不同，就像您所说的“将条形图和横幅动画化在一起”，但我不希望那样。我希望它像第一个框一样工作，首先为栏设置动画，然后是横幅。对不起我上面说的，那是我的错
这就是我所追求的澄清，因为您实际上在原始问题中与此相矛盾。您可能需要重新阅读和编辑您的问题以明确说明。

标签： javascript html jquery css

【解决方案1】：

您可能只是忘记在两者之间添加“.animated”

"span19" & "::before", (in progress-line1 span19::before) 和
“span19”和“::after”（进行中-line1 span19::after）

【讨论】：

有动画wdym。请更清楚你想说什么
在您的 CSS 文件中，您编写的代码如下： .progress-line1 span19::before { ... } 如果您遵循第一个框代码，它应该是这样的：.progress -line1 span19.animated::before { ... }
哦，我现在明白了，谢谢！