用于在页面上逐步滑动点的对象内的复合值

Question

我无法让变量作为我对象中的 translateX 值正常运行。每次单击下一个按钮时，我都想让点在页面上滚动。我的代码只能在第一步来回移动它。我是动画 API 的新手，我已经使用 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 值根据单击事件侦听器而增加或减少，这将使圆圈在页面上滑动。实际发生的是，只有第一步有效。它不会超过第一个停止点。如果我在控制台中记录 moveDot，它会给我我期望的值，但它只会在 0 和 190 处启动/停止。后退按钮的功能相同。

Answer 1

它每次都在同一个地方进行动画处理。将 的定义移动moveDot到事件侦听器中：

// give a starting value for the transformation

var startVal = 0;

// definte the timing

var dotTiming = {

  duration: 400,

  fill: "forwards",

  easing: 'ease-in',

}

// on click fire the animation

document.getElementById('next').addEventListener('click', function() {

  if (startVal > 380){return;}

  // define the keyframes

  var moveDot = [{transform: `translateX(${startVal}px)`},

    {transform: `translateX(${startVal + 190}px)`}];

  // make the animation happen

  var movingDot = document.getElementById("progress__dot").animate(

    moveDot,

    dotTiming

  );

  movingDot.playbackRate = 1;

  movingDot.play();

  startVal += 190;

});

document.getElementById('back').addEventListener('click', function() {

  movingDot.playbackRate = -1;

  if (startVal >= 0) {

    movingDot.play();

    startVal -= 190;

  }

});