多步進度條上的 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>

當您單擊每個步驟時，它會在每個步驟完成后逐步移動。