Как анимировать заливку цвета фона на div - PullRequest
Новая
       9

Как анимировать заливку цвета фона на div

0 голосов
/ 05 июня 2018

Я работаю над пользовательским угловым компонентом, который в настоящее время выглядит следующим образом:

Slider

Небольшая зеленая часть, которую вы видите слева,моя попытка иметь отдельное перекрытие 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>

Вот что я получаю с кодом выше (я нажал на последний индикатор, чтобы перейти в это состояние):

Slider2

Как я могу вместо этого поместить inner-shell поверх shell, но все еще под indicators?

Спасибо

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вы можете поместить 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>
0 голосов
/ 05 июня 2018

Вы можете использовать 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>
...