希望有人能帮忙。有点难以解释，但我刚刚完成并提交了挑战的代码，尽管我满足了挑战的基本要求，但我决定添加一个动画作为额外的内容。
我们得到了一些代码，每次刷新浏览器窗口时，这些代码都会在数组中随机生成一组新的数字。我的工作是将数组中的数字相加，并构建一个应用程序，该应用程序使用下一个和上一个按钮来迭代数组。如果总金额>则消息应该显示类似于"真"的东西；你可以负担得起"；else(false("；你负担不起。
如果单击上一个或下一个，它会在随机生成的数组中来回迭代。例如，如果我点击下一步，它将生成一组新的随机数，结果是一个新的总数，并且根据条件为真或假。
我在混合中添加了一个由上述条件触发的动画；你可以负担得起"；动画被添加、运行和移除"；如果你负担不起"；。
如果我点击next，并且在false条件之前有一个true条件，那么代码就会工作，反之亦然。
但是，如果在单击"下一步"后，在另一个真实条件后面有一个真实的条件，则动画仅在第一个真实条件上运行。
我希望这是合理的，这是我的代码。很抱歉代码太多，但我认为它能更好地解释它。非常感谢。
function roll(min, max, floatFlag) {
let r = Math.random() * (max - min) + min;
return floatFlag ? r : Math.floor(r);
}
let testPurses = Array(5)
.fill(0)
.map((a) => {
return {
quarters: roll(0, 15),
dimes: roll(0, 30),
nickels: roll(0, 40),
pennies: roll(0, 50),
price: Number(roll(0, 10, 1).toFixed(2))
};
});
/*
Write a function enoughChange
Given an object representing a coin purse, and a price
it should return true/false depending on whether
or not you have enough change to complete a
purchase at the given price
The function should also update the "counters"
such that they reflect the quantities in
the test case
You should then use this function to update the
purchaseConfirmation div to display whether
or not you can afford the purchase with the
coin quantities provided
Finally, create nextCase and previousCase
buttons to cycle through the test cases
Refresh the mini-browser or save this file to
load new test cases!
*/
const purchaseConfirmation = document.getElementById("purchase-confirmation");
const quarterCounter = document.getElementById("quarter-count");
const dimeCounter = document.getElementById("dime-count");
const nickelCounter = document.getElementById("nickel-count");
const pennyCounter = document.getElementById("penny-count");
const nextBtn = document.getElementById("next-case");
const prevBtn = document.getElementById("previous-case");
const reload = document.getElementById("reloadBTN");
const purchaseConfirm = document.getElementById("purchase-confirmation");
const plane = document.querySelector(".plane");
let index = 0;
const handleChanges = () => {
let { quarters, dimes, nickels, pennies } = testPurses[index];
const coinCount = Object.values(testPurses[index]);
let Moneytotal = (
coinCount[0] * 1 +
coinCount[1] * 5 +
coinCount[2] * 10 +
coinCount[3] * 20
).toFixed(2);
let itemPrice = (testPurses[index].price * 100).toFixed(2);
let leftover = (Moneytotal - itemPrice).toFixed(2);
quarterCounter.innerHTML = quarters;
dimeCounter.innerHTML = dimes;
nickelCounter.innerHTML = nickels;
pennyCounter.innerHTML = pennies;
let enough = `Yeeesssss... you did it.You have saved £${Moneytotal} and can afford a post lock-down holiday worth £${itemPrice} with £${leftover} left over, for going crazy with `;
let notEnough = `Sorry you can't afford a holiday any time soon.. keep your chin up and keep saving`;
if (Moneytotal >= itemPrice) {
purchaseConfirm.innerHTML = enough;
plane.classList.add("animation");
} else {
purchaseConfirm.innerHTML = notEnough;
plane.classList.remove("animation");
}
};
nextBtn.addEventListener("click", () => {
if (index >= 0 && index < testPurses.length - 1) {
index++;
} else {
index = 0;
}
handleChanges();
});
reload.addEventListener("click", () => {
history.go(0);
});
prevBtn.addEventListener("click", (event) => {
if (index >= 1) {
index--;
} else {
index = testPurses.length - 1;
}
handleChanges();
});
handleChanges();
下面的CSS：
.animation{
animation-name: slidein;
animation-duration: 4s;
animation-direction: reverse;
/* animation-play-state: paused; */
}
@keyframes slidein {
from {
margin-left: 100%;
}
to {
margin-bottom: 0%;
}
}
HTML
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div id="coins">
<div class="coin quarter">£1</div>
<div class="coin dime">£5</div>
<div class="coin nickel">£10</div>
<div class="coin penny">£20</div>
</div>
<div id="coin-counts">
<div id="quarter-count"></div>
<div id="dime-count"></div>
<div id="nickel-count"></div>
<div id="penny-count"></div>
</div>
<div id="purchase-confirmation"></div>
<div id="fly"><img class="plane" src="https://epixieme.github.io/images-repo/planesmall.png" alt="" /></div>
<div id="case-switcher">
<button id="previous-case">Previous</button>
<button id="reloadBTN">Reload Sequence</button>
<button id="next-case">Next</button>
</div>
</div>
<!-- <a href="https://www.vecteezy.com/"> PNGs by Vecteezy</a> -->
<script src="index.pack.js"></script>
</body>
</html>
最好能看到你的CSS
但我最初的想法是，在添加"animation"类以再次播放动画之前，需要删除它。该类已添加到"true"案例中，因此您只需再次添加即可。由于动画已经播放，因此不会再播放。这就是为什么当条件不相同时，它的工作原理是根据需要添加和删除类
plane.classList.remove("animation");
if条件的完整示例：
plane.classList.remove("animation");
if (Moneytotal >= itemPrice) {
purchaseConfirm.innerHTML = enough;
plane.classList.add("animation");
} else {
purchaseConfirm.innerHTML = notEnough;
}
类的移除和添加很快就会发生，所以请尝试在超时时包装回调，如下所示
nextBtn.addEventListener("click", () => {
if (index >= 0 && index < testPurses.length - 1) {
index++;
} else {
index = 0;
}
plane.classList.remove("animation");
window.setTimeout(()=>{handleChanges();}, 500)
//handleChanges();
});
或者，您实际上可以为animationend事件添加一个事件侦听器，并在那里删除类：
例如
plane.addEventListener('animationend', () => {
plane.classList.remove('animation')
})