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