如何在div上填充背景颜色的动画

Question

我正在开发一个自定义Angular组件，目前看起来如下所示：

您在左侧看到的小绿色部分是我尝试单独的div重叠，以便当我点击其中一个白色圆形选择器时，绿色填充直到该点。

这是我的代码：

var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');

shell.addEventListener('click', function(ev) {
  alert("in");
  if (ev.path && ev.path[0].className === 'indicator') {
    var targetNode = ev.srcElement;
    var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
    var centerY = targetNode.offsetTop + targetNode.offsetHeight;

    inner.style.width = `${centerX + 40}px`;
  }
});

.inner-shell {
  background-color: #6FBC92;
  width: 50px;
  transition: 1s;
}

.shell {
  background-color: #DCDCDC;
  border-radius: 20px;
  display: inline-flex;
}

.indicator {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 20px;
  height: 13px;
  margin: 3px 28px;
  width: 13px;
}

<div class="inner-shell">
    <div class="shell">
      <div class="indicator"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
      <div class="indicator"></div>
    </div>

以下是我使用上面的代码获得的内容（我点击了最后一个指示符以达到此状态）：

我怎么能把inner-shell放在shell的顶部，但仍然在indicators下面？

谢谢

Answer 1

您可以将inner-shell放入shell并使用position:absolute在指标上重叠

请参阅代码段：

var shell = document.querySelector('.shell');
var inner = document.querySelector('.inner-shell');

shell.addEventListener('click', function(ev) {
  if (ev.path && ev.path[0].className === 'indicator') {
    var targetNode = ev.srcElement;
    var centerX = targetNode.offsetLeft + targetNode.offsetWidth;
    var centerY = targetNode.offsetTop + targetNode.offsetHeight;

    inner.style.width = `${centerX + 40}px`;
  }
});

.shell .inner-shell {
  background-color: #6FBC92;
  width: 10px;
  transition: 1s;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  height: 100%;
  border-radius: 20px;
}

.shell {
  background-color: #DCDCDC;
  border-radius: 20px;
  display: inline-flex;
  position: relative;
}

.indicator {
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 20px;
  height: 13px;
  margin: 3px 28px;
  width: 13px;
  position:relative;
  z-index:111;
}

<div class="shell">
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="inner-shell"></div>
</div>

Answer 2

你可以使用linear-gradient，这是一个你可以调整的简化示例：

var shell = document.querySelectorAll('.container div');

for(var i=0;i<shell.length;i++) {
  shell[i].addEventListener('click', function(ev) {
      var centerX = ev.target.offsetLeft - ev.target.parentNode.offsetLeft + 15;
      ev.target.parentNode.style.backgroundSize =centerX+'px 100%';
  });
}

.container {
  margin:5px auto;
  height:30px;
  width:300px;
  border-radius:30px;
  background-image:linear-gradient(green,green);
  background-position:left;
  background-size:0px 100%;
  background-repeat:no-repeat;
  background-color:grey;
  display:flex;
  justify-content:space-around;
  transition:1s all;
}
.container > div {
  height:30px;
  width:30px;
  border-radius:50%;
  background:#fff;
}

<div class="container">
<div></div><div></div><div></div><div></div>
</div>