Javascript 用于在页面上以增量方式滑动点的对象内的复合值

Javascript 用于在页面上以增量方式滑动点的对象内的复合值,javascript,web-animations,web-animations-api,Javascript,Web Animations,Web Animations Api,我无法使变量作为对象中的translateX值正常工作。我想让点在每次点击下一步按钮时在页面上滚动。我的代码只能在第一步前后移动它 我是动画API的新手,我已经用CSS转换完成了这项工作,但我正在尝试对API进行良好的处理 html: 按照我的设置方式,我希望translateX值根据单击事件侦听器的不同而递增或递减,这将使圆圈在页面上滑动。事实上,只有第一步起作用。它不会超过第一个停车点。如果我在控制台中记录moveDot,它会给出我期望的值,但它只会在0和190处启动/停止。后退按钮的功能与

我无法使变量作为对象中的translateX值正常工作。我想让点在每次点击下一步按钮时在页面上滚动。我的代码只能在第一步前后移动它

我是动画API的新手,我已经用CSS转换完成了这项工作,但我正在尝试对API进行良好的处理

html:


按照我的设置方式,我希望translateX值根据单击事件侦听器的不同而递增或递减,这将使圆圈在页面上滑动。事实上,只有第一步起作用。它不会超过第一个停车点。如果我在控制台中记录moveDot,它会给出我期望的值,但它只会在0和190处启动/停止。后退按钮的功能与此相同

它每次都在同一个地方设置动画。将
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;
  }

});


@我不想知道我已经编辑了我的答案,但是我现在不能测试它,因为我现在的小提琴有500个错误。这是一个代码笔,我之所以这么做是因为JSFIDLE也给了我一个错误。我用你的新代码进行了更新,它可以正常工作。我必须对后退按钮做同样的更改,但非常感谢!
// 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;
    } 

});
#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;
}
// 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;
  }

});