Question

我花了最后两天获得一个带状动画来处理div，以便我以后可以添加li链接元素作为菜单。我使用progess bar动画代码作为w3schools的灵感。动画效果很好，唯一的问题是代码非常干。我试图通过不在CSS中重复自己来简化代码，尤其是在javascript中，但是即使在使用自调用函数之后我仍然遇到了闭包问题。如果有人能给我一些建议甚至是一个能够大大缩短我的代码以获得相同动画效果的解决方案，我会很高兴。我知道页面上会有几个色带，每个色带都有不同数量的色带层，因此代码可以非常快速地变得非常复杂。 N.B下面的代码是工作版本。

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操作自动创建不同的色带及其样式。

功能区动画代码过于重复

1 个答案: