我無法讓變量作為我對象中的 translateX 值正常運行。每次單擊下一個按鈕時，我都想讓點在頁面上滾動。我的代碼只能在第一步來回移動它。我是動畫 API 的新手，我已經(jīng)使用 CSS 轉換完成了這項工作，但我正在嘗試很好地處理 API。html：<div class="progress__container">                <div class="progress__bar">                        <div id="progress__fill" class="step1"></div>                        <div class="circ" id="circ__1"></div>                        <div class="circ" id="circ__2"></div>                        <div class="circ" id="circ__3"></div>                        <div class="circ" id="circ__4"></div>                        <div id="progress__dot" class="prog__1"></div>                    </div>            <div class="backBar"></div>            <div class="flexrow">                    <span class="stepName">Account</span>                    <span class="stepName">Frequency</span>                    <span class="stepName">Amount</span>                    <span class="stepName">Taxes</span>                </div>            <div class="button__container">                <button class="buttonStep" id="back">Back</button>                <button class="buttonStep is-active" id="next">Next</button>            </div>    </div>js：// give a starting value for the transformationvar startVal = 0;// define the keyframesvar moveDot = [    { transform: `translateX(${startVal}px)`},    { transform: `translateX(${startVal + 190}px)`}  ];// definte the timingvar dotTiming = {    duration: 400,      fill: "forwards",      easing: 'ease-in',} // make the animation happenvar movingDot = document.getElementById("progress__dot").animate(    moveDot,    dotTiming  );//  pause the animation until calledmovingDot.pause();    // on click fire the animationdocument.getElementById('next').addEventListener('click', function() {    movingDot.playbackRate = 1;    if (startVal <= 380) {        movingDot.play();        startVal += 190;    } });按照我的設置方式，我希望 translateX 值根據(jù)單擊事件偵聽器而增加或減少，這將使圓圈在頁面上滑動。實際發(fā)生的是，只有第一步有效。它不會超過第一個停止點。如果我在控制臺中記錄 moveDot，它會給我我期望的值，但它只會在 0 和 190 處啟動/停止。后退按鈕的功能相同。