用于在页面上递增地滑动点的对象内的复合值

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;
    } 



});


document.getElementById('back').addEventListener('click', function() {
    movingDot.playbackRate = -1;
    if (startVal >= 0) {
        movingDot.play();
        startVal -= 190;
    } 

});

css:

#progress__fill {
    height:2px;
    position: absolute;
    top: 7px;
    left: 0;
    background-color: darkred;
}
#progress__dot {
    background-color: darkred;
    color: #fff;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    text-align:center;
    line-height: 8px;
    padding: 6px;
    top: 0;
    font-size: 12px;


}





/* Static Bar Elements */
.progress__container {
 width: 600px;
 margin: 20px auto;
 position: relative;

}
.backBar {
    height:2px;
    width:96%;
    position: absolute;
    top: 7px;
    left: 2%;
    background-color: lightgrey;
}
.progress__bar {
    z-index: 100;
    position: relative;
    width: 96%;
    margin: 0 auto;
}
.circ {
    background-color: #fff;
    border: 2px solid lightgrey;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    display: inline-block;

}
#circ__2, #circ__3 {
    margin-left: 30%
}
#circ__4 {
    float: right;
}
.passed {
    background-color: darkred;
    border: 2px solid darkred;
}
.hide {
    visibility: hidden
}
.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/* Buttons */
.buttonStep {
    background: grey;
    color: #fff;
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 16px;
}
#back {
    float: left;
}
#next {
    float: right;
}
.is-active {
    background: darkred;
}

按照我设置的方式，我希望 translateX 值根据点击事件侦听器递增或递减，这将使圆圈在页面上滑动。实际发生的情况是只有第一步有效。它不会超过第一个停止点。如果我在控制台中记录 moveDot，它会给出我期望的值，但它只会 start/stop 在 0 和 190。后退按钮的功能相同。 link to fiddle

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;
  }

});

用于在页面上递增地滑动点的对象内的复合值

Compounding Value within an object used to slide dot across the page incrementally

javascript

web-animations

web-animations-api