Ribbon动画代码过于重复

Question

在过去的两天里，我使用div制作了一个ribbon动画，这样以后就可以将li link元素添加到它们中，作为一个菜单。我使用进度条动画代码作为w3schools的灵感来源。动画效果很好，唯一的问题是代码非常不干练。我试图简化代码，不在CSS中重复自己，尤其是在javascript中，但即使在使用自调用函数之后，我仍然遇到闭包问题。如果有人能给我一些建议，甚至是一个解决方案，可以大大缩短我的代码，使其具有相同的动画效果，我将不胜感激。我知道我将在页面上有几个功能区，每个功能区都有不同数量的功能区层，所以代码可以变得非常复杂，非常快。注意:下面的代码是工作版本。

​

function move1() {
  var width = 0;
  var elem = document.getElementById("ribbon-part-1");
  var id = setInterval(frame, 1);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}


function move2() {
  var width = 0;
  var elem = document.getElementById("ribbon-part-2");
  var id = setInterval(frame, 1)

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width += 2;
      elem.style.width = width + '%';
    }
  }
}

function move3() {
  var width = 0;
  var elem = document.getElementById("ribbon-part-3");
  var id = setInterval(frame, 1)

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width += 2;
      elem.style.width = width + '%';
    }
  }
}

function move4() {
  var width = 0;
  var elem = document.getElementById("ribbon-part-4");
  var id = setInterval(frame, 1)

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width += 2;
      elem.style.width = width + '%';
    }
  }
}

function move5() {
  var width = 0;
  var elem = document.getElementById("end-ribbon");
  var id = setInterval(frame, 1)

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width += 2;
      elem.style.width = width + '%';
    }
  }
}

function move() {
  setTimeout(move1, 300);
  setTimeout(move2, 600);
  setTimeout(move3, 900);
  setTimeout(move4, 1200);
  setTimeout(move5, 1500);
}

* {
  box-sizing: border-box;
}

.front-ribbon {
  position: relative;
  /*background-color: grey;*/
  height: 23px;
  width: 160px;
  z-index: 1;
  transform: skewY(-11deg);
}

.back-ribbon {
  position: relative;
  /*background-color: grey;*/
  height: 23px;
  width: 160px;
  transform: skewY(4.7deg);
  z-index: -1;
}

#ribbon-part-1 {
  background-color: rgb(70, 125, 76);
  height: 23px;
  width: 0%;
}

#ribbon-part-2 {
  background-color: rgb(89, 166, 101);
  height: 23px;
  width: 0%;
}


/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-2 {
  display: block;
  float: right;
}

#ribbon-part-3 {
  background-color: rgb(70, 125, 76);
  height: 23px;
  width: 0%;
}

#ribbon-part-4 {
  background-color: rgb(89, 166, 101);
  height: 23px;
  width: 0%;
}


/*Including the code below will allow for a reverse progressive bar*/
.front-ribbon #ribbon-part-4 {
  display: block;
  float: right;
}

#end-ribbon {
  fill: rgb(70, 125, 76);
  width: 0%;
}

<h1>JavaScript ribbon animation</h1>

<div class="back-ribbon">
  <div id="ribbon-part-1"></div>
</div>
<div class="front-ribbon">
  <div id="ribbon-part-2"></div>
</div>
<div class="back-ribbon">
  <div id="ribbon-part-3"></div>
</div>
<div class="front-ribbon">
  <div id="ribbon-part-4"></div>
</div>

<svg id="end-ribbon">
  <path d="M-6 17 L35 24 L24 10 Z" />
</svg>

<br>
<br>
<br>
<button onclick="move()">Click Me</button>

​

Answer 1

也许可以使用ReactJS或类似的方法，在JS主体中通过DOM操作自动创建不同的ribbons及其样式。