我必须将声明放入我项目的点击监听器中,这是codepen 上的代码。
// give a starting value for the transformation
var slideBarWidth = 0,
slideBarScalePoint = 0,
currentStep = 1,
dot = document.querySelector(".progress__dot"),
boxWidth,
newWidth,
elementsCount = document.getElementsByClassName("progress__steps")[0].children
.length,
boxDivider = elementsCount - 1;
// insert the current step number into the progress dot
dot.textContent = currentStep;
// define the timing for progress dot
var dotTiming = {
duration: 500,
fill: "both",
easing: "ease-in-out"
};
// define the timing for sliding bar
var barTiming = {
duration: 500,
fill: "both",
easing: "ease-in-out"
};
var passedTiming = {
fill: "both"
};
function checkSize() {
newWidth = dot.parentElement.offsetWidth;
if (newWidth !== boxWidth) {
resizeSteps();
}
}
// on window.resize reassign the position of the slider bar and the progress dot.
function resizeSteps() {
setWidth();
var resetDot = [
{
transform:
"translateX(" +
((boxWidth / boxDivider) * (currentStep - 2) - dot.offsetWidth / 2) +
"px)"
},
{
transform:
"translateX(" +
((boxWidth / boxDivider) * (currentStep - 1) - dot.offsetWidth / 2) +
"px)"
}
];
var reslideBar = [
{
width: (boxWidth / boxDivider) * (currentStep - 2) + "px",
transformOrigin: "left"
},
{
width: (boxWidth / boxDivider) * (currentStep - 1) + "px",
transformOrigin: "left"
}
];
var reslidingBar = document
.querySelector(".progress__fill")
.animate(reslideBar, barTiming);
var resettingDot = document
.querySelector(".progress__dot")
.animate(resetDot, dotTiming);
}
function setWidth() {
// count the number of elements in the progress steps div and set up the sizing accordingly
document
.getElementsByClassName("progress__container")[0]
.classList.add("progress__container--" + elementsCount + "step");
boxWidth = dot.parentElement.offsetWidth;
startDot();
}
function startDot() {
// set the initial position of the progress dot
document
.querySelector(".progress__dot")
.setAttribute(
"style",
"transform: translateX(-" + dot.offsetWidth / 2 + "px);"
);
slideElements();
}
function slideElements() {
// position the elements across the slider bar
for (var element = 0; element < elementsCount; element++) {
document
.getElementsByClassName("progress__element")
[element].setAttribute(
"style",
"left:" + (boxWidth / boxDivider) * element + "px"
);
document
.getElementsByClassName("progress__element")
[element].classList.add("progress__element--step" + (element + 1));
}
// make the first current name bold
document
.querySelector(".progress__element--step" + currentStep + " .stepName")
.classList.add("bold");
}
document.addEventListener("DOMContentLoaded", setWidth);
window.addEventListener("resize", checkSize);
// on click fire the animation
document.getElementById("next").addEventListener("click", function() {
// make sure the slider does not go further than it should
if (currentStep > boxDivider) {
return;
}
// define the keyframes for the progress dot
if (currentStep == 1) {
var moveDot = [
{
transform: "translateX(-" + dot.offsetWidth / 2 + "px)"
},
{
transform:
"translateX(" +
((boxWidth / boxDivider) * currentStep - dot.offsetWidth / 2) +
"px)"
}
];
} else {
var moveDot = [
{
transform:
"translateX(" +
((boxWidth / boxDivider) * (currentStep - 1) - dot.offsetWidth / 2) +
"px)"
},
{
transform:
"translateX(" +
((boxWidth / boxDivider) * currentStep - dot.offsetWidth / 2) +
"px)"
}
];
}
// define the keyframes for the sliding bar
var slideBar = [
{
width: (boxWidth / boxDivider) * (currentStep - 1) + "px",
transformOrigin: "left"
},
{
width: (boxWidth / boxDivider) * currentStep + "px",
transformOrigin: "left"
}
];
var showDot = [
{ backgroundColor: "#fff", border: "2px solid #B5ADAD" },
{ backgroundColor: "#A93E00", border: "2px solid #A93E00" }
];
// putting the keyframes and timings together (progress dot)
var movingDot = document
.querySelector(".progress__dot")
.animate(moveDot, dotTiming);
// putting the keyframes and timings together (sliding bar)
var slidingBar = document
.querySelector(".progress__fill")
.animate(slideBar, barTiming);
var passingDot = document
.querySelector(".progress__element--step" + currentStep + " .circ")
.animate(showDot, passedTiming);
// making the animation play forwards
movingDot.playbackRate = 1;
slidingBar.playbackRate = 1;
passingDot.playbackRate = 1;
// starting the animations
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// incrementing and setting the step counter
currentStep++;
document.querySelector(".progress__dot").textContent = currentStep;
if (currentStep > 1) {
document.getElementById("back").classList.add("is-active");
}
if (currentStep > boxDivider) {
document.getElementById("next").classList.remove("is-active");
}
// toggling the bold class for the step names
document
.querySelector(
".progress__element--step" + (currentStep - 1) + " .stepName"
)
.classList.remove("bold");
setTimeout(function() {
document
.querySelector(".progress__element--step" + currentStep + " .stepName")
.classList.add("bold");
}, 400);
});
document.getElementById("back").addEventListener("click", function() {
// make sure the slider does not go back past the beginning
if (currentStep < 2) {
return;
}
var moveDot = [
{
transform:
"translateX(" +
((boxWidth / boxDivider) * (currentStep - 2) - dot.offsetWidth / 2) +
"px)"
},
{
transform:
"translateX(" +
((boxWidth / boxDivider) * (currentStep - 1) - dot.offsetWidth / 2) +
"px)"
}
];
var slideBar = [
{
width: (boxWidth / boxDivider) * (currentStep - 2) + "px",
transformOrigin: "left"
},
{
width: (boxWidth / boxDivider) * (currentStep - 1) + "px",
transformOrigin: "left"
}
];
var showDot = [
{ backgroundColor: "#A93E00", border: "2px solid #A93E00" },
{ backgroundColor: "#fff", border: "2px solid #B5ADAD" }
];
// putting the keyframes and timings together
var movingDot = document
.querySelector(".progress__dot")
.animate(moveDot, dotTiming);
var slidingBar = document
.querySelector(".progress__fill")
.animate(slideBar, barTiming);
var passingDot = document
.querySelector(".progress__element--step" + currentStep + " .circ")
.animate(showDot, passedTiming);
// making the animation reverse
movingDot.playbackRate = -1;
slidingBar.playbackRate = -1;
passingDot.playbackrate = -1;
// starting the animation
movingDot.play();
slidingBar.play();
movingDot.onfinish = passingDot;
// decrementing and setting the step counter
currentStep--;
// set the current step number as the number in the progress dot on the page
document.querySelector(".progress__dot").textContent = currentStep;
if (currentStep < elementsCount) {
document.getElementById("next").classList.add("is-active");
}
if (currentStep < 2) {
document.getElementById("back").classList.remove("is-active");
}
// ('.progress__element--step' + currentStep + ' .stepName')
// toggling the bold class for the step names
document
.querySelector(
".progress__element--step" + (currentStep + 1) + " .stepName"
)
.classList.remove("bold");
setTimeout(function() {
document
.querySelector(".progress__element--step" + currentStep + " .stepName")
.classList.add("bold");
}, 400);
});