CSS Анимация на многоступенчатом индикаторе прогресса не работает

Question

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

Проблема, с которой я сталкиваюсь, связана со свойствами анимации CSS. Я определил свойства анимации для него, но это не анимация. Я потратил бесчисленные часы, пытаясь найти что-то не так, но безрезультатно.

Пробная проверка, если css был переопределен, оказывается, что он переопределяется, но сам по себе, а не из другого CSS, так что Вы потеряли дело.

Можете ли вы, ребята, помочь мне с этой проблемой?

Ниже приведен код, который я использую:

const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
const step4 = document.getElementById('step4');
step1.classList.remove("is-active");
step1.classList.add("is-complete");
step2.classList.add("is-active");

.progressreview {
  position: relative;
  display: flex;
}

.progressreview .progressreview-track {
  position: absolute;
  top: 5px;
  width: 100%;
  height: 5px;
  background-color: #dfe3e4;
  z-index: -1;
}

.progressreview .progressreview-step {
  position: relative;
  width: 100%;
  font-size: 12px;
  text-align: center;
}

.progressreview .progressreview-step:last-child:after {
  display: none;
}

.progressreview .progressreview-step:before {
  content: "\f00c";
  display: flex;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 4px solid #dfe3e4;
  border-radius: 100%;
  color: #fff;
}

.progressreview .progressreview-step:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 0%;
  transition: width 1s ease-in;
  height: 5px;
  background: #dfe3e4;
  z-index: -1;
}

.progressreview .progressreview-step.is-active {
  color: #2183dd;
}

.progressreview .progressreview-step.is-active:before {
  border: 4px solid #777;
  animation: pulse 2s infinite;
}

.progressreview .progressreview-step.is-complete {
  color: #009900;
}

.progressreview .progressreview-step.is-complete:before {
  font-family: FontAwesome;
  font-size: 10px;
  color: #fff;
  background: #009900;
  border: 4px solid transparent;
}

.progressreview .progressreview-step.is-complete:after {
  background: #2183dd !important;
  animation: nextStep 1s !important;
  animation-fill-mode: forwards !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(33, 131, 221, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(33, 131, 221, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(33, 131, 221, 0);
  }
}

@keyframes nextStep {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

<div class="progressreview">
  <div class="progressreview-track"></div>
  <div id="step1" class="progressreview-step">
    Step One
  </div>
  <div id="step2" class="progressreview-step">
    Step Two
  </div>
  <div id="step3" class="progressreview-step">
    Step Three
  </div>
  <div id="step4" class="progressreview-step">
    Complete
  </div>
</div>

Результат:

Какой он должен быть:

Было бы очень хорошо, если бы кто-нибудь мог мне помочь в этом.

Спасибо.

Answer 1

Для ожидаемого результата ваш код работает нормально. Но все же вы ищете альтернативу, пожалуйста, обратитесь к приведенному ниже

$('.steps').on('click', '.step--active', function() {
  $(this).removeClass('step--incomplete').addClass('step--complete');
  $(this).removeClass('step--active').addClass('step--inactive');
  $(this).next().removeClass('step--inactive').addClass('step--active');
});

$('.steps').on('click', '.step--complete', function() {
  $(this).removeClass('step--complete').addClass('step--incomplete');
  $(this).removeClass('step--inactive').addClass('step--active');
  $(this).nextAll().removeClass('step--complete').addClass('step--incomplete');
  $(this).nextAll().removeClass('step--active').addClass('step--inactive');
});

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  33% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  66% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  33% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  66% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

html {
  font-size: 16px;
}

html,body {
  height: 100%;
}

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: #292627;
  color: #e6e7e8;
  font-family: "Montserrat", sans-serif;
}

.steps {
  display: -webkit-box;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0 0 2rem 0;
  list-style: none;
}

.step {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-flex: 1;
  flex: 1;
  position: relative;
  pointer-events: none;
}
.step--active, .step--complete {
  cursor: pointer;
  pointer-events: all;
}
.step:not(:last-child):before, .step:not(:last-child):after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0.25rem;
  content: "";
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  will-change: width;
  z-index: -1;
}
.step:before {
  width: 100%;
  background-color: #e6e7e8;
}
.step:after {
  width: 0;
  background-color: #ff2267;
}
.step--complete:after {
  width: 100% !important;
  opacity: 1;
  -webkit-transition: width 0.6s ease-in-out, opacity 0.6s ease-in-out;
  transition: width 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.step__icon {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  width: 3rem;
  height: 3rem;
  background-color: #292627;
  border: 0.25rem solid #e6e7e8;
  border-radius: 50%;
  color: transparent;
  font-size: 2rem;
}
.step__icon:before {
  display: block;
  color: #fff;
  content: "\2713";
}
.step--complete.step--active .step__icon {
  color: #fff;
  -webkit-transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.step--incomplete.step--active .step__icon {
  border-color: #ff2267;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.step--complete .step__icon {
  -webkit-animation: bounce 0.5s ease-in-out;
  animation: bounce 0.5s ease-in-out;
  background-color: #ff2267;
  border-color: #ff2267;
  color: #fff;
}

.step__label {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  margin-top: 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.step--incomplete.step--inactive .step__label {
  color: #e6e7e8;
}
.step--incomplete.step--active .step__label {
  color: #fff;
}
.step--active .step__label {
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

<ul class="steps">
  <li class="step step--incomplete step--active">
    <span class="step__icon"></span>
    <span class="step__label">Step 1</span>
  </li>
  <li class="step step--incomplete step--inactive">
    <span class="step__icon"></span>
    <span class="step__label">Step 2</span>
  </li>
  <li class="step step--incomplete step--inactive">
    <span class="step__icon"></span>
    <span class="step__label">Step 3</span>
  </li>
  <li class="step step--incomplete step--inactive">
    <span class="step__icon"></span>
    <span class="step__label">Step 4</span>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Он будет перемещаться шаг за шагом после выполнения каждого шага при нажатии на каждый шаг.