javascript - Web 动画 API:translateX 的 OOP 类值未定义
问题描述
我正在用 JavaScript 制作一个简单的动画。我使用了来自Web Animation API的 Animation 类。我只想再创建几个该类的实例,并希望用不同的值为不同的元素设置动画并替换 translateX 的变换值。我已经设置了我的构造函数,我只想动态地将值传递给 translateX;
这是我的完整项目
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();
解决方案
我必须将声明放入我项目的点击监听器中,这是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);
});
推荐阅读
- react-native - 无法在嵌套调用的第二个 API 调用中访问 this.setState (AWS Amplify Storage API) (React Native)
- javascript - ajax 的小问题。执行错误函数
- docker - Docker 节点 js 问题:找不到 sudo
- reactjs - 如何将 Material UI 主题传递给许多“路由”组件
- microsoft-cognitive - 在 LUIS 中找不到 Bing 拼写检查错误
- mamp - 如何为 MAMP 免费版配置多个虚拟主机
- r - 收集数据时在函数中添加“睡眠”
- tensorflow - 张量流操作是逐点的吗?
- c++ - 未定义对 cv::fisheye::calibrate 的引用
- java - WELD-000143:在扩展观察者方法调用之外调用的容器生命周期事件方法。在 websphere 自由服务器上