javascript - 如何为 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>