[英]Web Animation API: OOP class value of translateX is undefined
I am making a simple animation with JavaScript.我正在用 JavaScript 制作一个简单的 animation。 I used Animation class from Web Animation API . I used Animation class from Web Animation API . I just want to create few more instance of that class and want to animate different element with different value and replace transform value of translateX.我只想再创建几个该 class 的实例,并希望用不同的值为不同的元素设置动画并替换 translateX 的变换值。 I have setup my constructor I just want to dynamically pass the value to translateX ;我已经设置了我的构造函数,我只想动态地将值传递给 translateX ;
Here is my full project这是我的完整项目
JavaScript File JavaScript 文件
// https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010
const car = document.getElementById("car");
// CAR ANIMATION
class CarAnimate {
constructor(tFormXStart , tFormYStart, tFormXStop, tFormYStop, startOpacity, stopOpacity) {
this.tFormXStart = tFormXStart;
this.tFormYStart = tFormYStart;
this.tFormXStop = tFormXStop;
this.tFormYStop = tFormYStop;
this.startOpacity = startOpacity;
this.stopOpacity = stopOpacity;
}
carRightKeyframes = new KeyframeEffect(
car,
[
{
// WANT TO SET THE VALUE OF TRANSLATE X DYNAMICALLY
//HELP IF YOU CAN
transform:'translateX('+this.tFormXStart+'%)', // HERE IT SHOWING VALUE IS UNDEFINED
},
{
transform: 'translateX('+this.tFormXStop+'%)',
}
], {
duration: 3000,
fill: 'forwards',
iterations: Infinity
},
);
carRightAnimation = new Animation(this.carRightKeyframes, document.timeline);
start() {
this.carRightAnimation.play();
}
}
//FROM HERE I WANT TO SET THE FIRST AND THIRD PARAMETERS TO BE WORK
const carAnimate =new CarAnimate(0, 0, 100, 0,0, 1);
carAnimate.start();
I had to put the declarations into the click listener on my project, here is the code on codepen .我必须将声明放入我项目的点击监听器中,这是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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.