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

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 transformation

var startVal = 0;

// define the keyframes

var moveDot = [

    { transform: `translateX(${startVal}px)`},

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

  ];

// definte the timing

var dotTiming = {

    duration: 400,

      fill: "forwards",

      easing: 'ease-in',

} 

// make the animation happen

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

    moveDot,

    dotTiming

  );

//  pause the animation until called

movingDot.pause();

    // on click fire the animation

document.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 transformationvar startVal = 0;// definte the timingvar dotTiming = {&nbsp; duration: 400,&nbsp; fill: "forwards",&nbsp; easing: 'ease-in',}// on click fire the animationdocument.getElementById('next').addEventListener('click', function() {&nbsp; if (startVal > 380){return;}&nbsp; // define the keyframes&nbsp; var moveDot = [{transform: `translateX(${startVal}px)`},&nbsp; &nbsp; {transform: `translateX(${startVal + 190}px)`}];&nbsp; // make the animation happen&nbsp; var movingDot = document.getElementById("progress__dot").animate(&nbsp; &nbsp; moveDot,&nbsp; &nbsp; dotTiming&nbsp; );&nbsp; movingDot.playbackRate = 1;&nbsp; movingDot.play();&nbsp; startVal += 190;});document.getElementById('back').addEventListener('click', function() {&nbsp; movingDot.playbackRate = -1;&nbsp; if (startVal >= 0) {&nbsp; &nbsp; movingDot.play();&nbsp; &nbsp; startVal -= 190;&nbsp; }});