Не работает progress bar

Question

Суть его в том что у меня 10 вопросов(в проекте), и 11 квадратиков в прогресс баре, прогресс бар прибавляется и меняет ширину в положительную сторону, а "пустая часть" меняется в отрицательную(изменения с помощью анимации). Но у меня перестала работать анимация "пустой" части.

.bar1 {
    width: 32px;
    height: 30px;
    background: #7cbe68;
}

.bar2 {
    width: 30px;
    height: 30px;
    margin-left: 30px;
    margin-top: -30px;
    background: #7cbe68;
}

.bar3 {
    width: 30px;
    height: 30px;
    margin-left: 60px;
    margin-top: -30px;
    background: #7cbe68;
}

.bar4 {
    width: 30px;
    height: 30px;
    margin-left: 90px;
    margin-top: -30px;
    background: #7cbe68;
}

.bar5 {
    width: 30px;
    height: 30px;
    margin-left: 120px;
    margin-top: -30px;
    background: #7cbe68;
}

.bar6 {
    width: 30px;
    height: 30px;
    margin-left: 150px;
    margin-top: -30px;
    background: #7cbe68;
}

.bar7 {
    width: 30px;
    height: 30px;
    margin-left: 180px;
    margin-top: -30px;
    background: #7cbe68;
}

.bar8 {
    width: 30px;
    height: 30px;
    margin-left: 210px;
    margin-top: -30px;
    background: #7cbe68;
    animation-name: bar;
    animation-duration: 3s;
}

.bar9 {
    width: 30px;
    height: 30px;
    margin-right: 195px;
    margin-top: -30px;
    background: #313131;
    float: right;
    animation-name: bar0;
    animation-duration: 3s;
}

.bar10 {
    width: 30px;
    height: 30px;
    margin-left: 240px;
    margin-top: -30px;
    background: #313131;
}

.bar11 {
    width: 30px;
    height: 30px;
    margin-left: 270px;
    margin-top: -30px;
    background: #313131;
}

@keyframes bar {
    0% {
      width: 0px;  
    }

    100% {
      width: 30px;  
    }
}

@keyframes bar0 {
    0% {
      width: 60px;  
    }

    100% {
      width: 30px;  
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест</title>
    <link rel="stylesheet" href="style9.css">
</head>
<body>
    <div class="hat">
        <h1 class="h11">Questionnaire</h1>
        <div class="ProgressBar">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
            <div class="bar4"></div>
            <div class="bar5"></div>
            <div class="bar6"></div>
            <div class="bar7"></div>
            <div class="bar8"></div>
            <div class="bar9"></div>
            <div class="bar10"></div>
            <div class="bar11"></div>
        </div>
</body>

Answer 1

Хочу предложить вариант прогресс бара на основе Вашей задумки, с небольшим тестом, для того чтобы Вы могли увидеть его работу и решить подойдет ли он Вам или нет:

Основная идея заключена в том что мы можем использовать классы для того чтобы определять место для анимации, так же с помощью селекторов определять соседние и последующие элементы чтобы делать либо раскрашивание либо анимацию перехода.

Разметку я принципиально оставил такой как была у Вас, за исключением классов которым я дал более подходящие имена как и для анимаций.

const cmd = document.querySelector('.cmd');
const pg = document.querySelector('.ProgressBar');
const btns = Array.from(cmd.children) // все кнопки
const bars = Array.from(pg.children)  // все бары прогрессбара

/* делегируем нажатие на кнопку блоку .cmd*/
cmd.addEventListener('click', ({target})=> {
  if (target.tagName === 'BUTTON'){
    /* получаем индекс кнопки */
    const index = btns.indexOf(target)
    /* находим элемент .active */
    const old = pg.querySelector('.active')
    /* cнимаем с элемента .active */
    old.classList.remove('active')
    /* назначаем новый .active */
    bars[index + 1].classList.add('active')
  }
}, false)

/* прогресс бару задаем размер и фон */
.ProgressBar {
  display: flex;
  background: #313131; /* фон важен для последней части */
  width: 300px;
}

/* пребар используется для того чтобы прогресс бар был
темным до начала прогресса */
.prebar {
    width: 0px;
}
/* задает заполненный бар */
.bar {
    width: 30px;
    height: 30px;
    background: #7cbe68;
}
/* задает заполняющийся бар */
.bar.active {
  animation-name: bar_grow;
  animation-duration: 3s;
}
/* задает убывающий бар после заполняющегося */
.bar.active + .bar {
  background: #313131;
  animation-name: bar_shrink;
  animation-duration: 3s;
}
/* задает все бары после активного темными */
.active ~ .bar   {
  background: #313131;
}

@keyframes bar_grow {
    0% {
      width: 0px;  
    }
    100% {
      width: 30px;  
    }
}

@keyframes bar_shrink {
    0% {
      width: 60px;  
    }
    100% {
      width: 30px;  
    }
}

<div class="hat">
<h1 class="h11">Questionnaire</h1>
<div class="ProgressBar">
  <div class="prebar active"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="cmd">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>10</button>
</div>

БЛОГ НА HUSL

Не работает progress bar

Ответы (1 шт):