一个简单的javascript抛硬币程序的小问题

我是javascript编程的新手，不清楚如何处理执行流。我使用了"animation.css"中的一个动画来创建一个投掷硬币的程序。问题是，当我让javascript为动画添加类时，它不会运行，console.log会显示我没有添加任何类。你能帮我，让我明白为什么吗？非常感谢！^^

我的代码在这里：

//variabili globali
//let clickNumber=0;
//HTML to JS
coinContainer = document.querySelector('.coin-container');
coin = document.querySelector('#coin');
//Events
coin.addEventListener('click',flipCoin);
//Funzioni
function flipCoin(event) {
console.log(event.target);
let head = "https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp";
let tail = "https://qph.fs.quoracdn.net/main-qimg-9c81a54813716fccd8e3608ab2f51dcf";
scelta=Math.floor(Math.random() * 2);
if(scelta===0){
event.target.setAttribute('class','animated flip');
event.target.setAttribute('src',head);
console.log(event.target);
//wait a lil bit
for(let i=0;i>1000000000;i++){
//
}
event.target.setAttribute('class','');
console.log(event.target);
}
else{
event.target.setAttribute('class','animated flip');
event.target.setAttribute('src',tail);
console.log(event.target);
//wait a lil bit
for(let i=0;i>1000000000;i++){
//
}
event.target.setAttribute('class','');
console.log(event.target);
}
//clickNumber++;
}

/* ANIMATE.CSS */
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}

.animated.infinite {
animation-iteration-count: infinite;
}

.animated.delay-1s {
animation-delay: 1s;
}

.animated.delay-2s {
animation-delay: 2s;
}

.animated.delay-3s {
animation-delay: 3s;
}

.animated.delay-4s {
animation-delay: 4s;
}

.animated.delay-5s {
animation-delay: 5s;
}

.animated.fast {
animation-duration: 800ms;
}

.animated.faster {
animation-duration: 500ms;
}

.animated.slow {
animation-duration: 2s;
}

.animated.slower {
animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
.animated {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
animation-iteration-count: 1 !important; 
}
}
/* END ANIMATE CSS */
/* FLIP.CSS */
@keyframes flip {
from {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}

40% {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}

50% {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}

80% {
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in;
}

to {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in;
}
}

.animated.flip {
backface-visibility: visible;
animation-name: flip;
}
/* END FLIP CSS */
/* MY STYLE */
body{
background: #555555;
}
#coin{
width: 21.5rem;
height: 21.5rem;
}
.coin-container{
display: flex;
justify-content: center;
align-content: center;
align-items: center;
margin-top:15vh;
}
/* END MY STYLE */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="moneta.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="coin-container">
<img src="https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp" id="coin">
</div>


</body>
</html>

在添加类以触发动画之前先删除该类
为了强制重置动画，我添加了element.offsetWidth来强制回流。

//variabili globali
//let clickNumber=0;
//HTML to JS
coinContainer = document.querySelector('.coin-container');
coin = document.querySelector('#coin');
//Events
coin.addEventListener('click',flipCoin);
//Funzioni
function flipCoin(event) {
console.log(event.target);
let head = "https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp";
let tail = "https://qph.fs.quoracdn.net/main-qimg-9c81a54813716fccd8e3608ab2f51dcf";
scelta=Math.floor(Math.random() * 2);
if(scelta===0){
event.target.setAttribute('src',head);

event.target.className='';
event.target.offsetWidth;
event.target.className='animated flip';
}
else{
event.target.setAttribute('src',tail);
event.target.className='';
event.target.offsetWidth;
event.target.className='animated flip';
}
//clickNumber++;
}

.animatereset {
animation-iteration-count: 0;
}
.animated { animation-iteration-count: 1 }
/* ANIMATE.CSS */
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}

.animated.infinite {
animation-iteration-count: infinite;
}

.animated.delay-1s {
animation-delay: 1s;
}

.animated.delay-2s {
animation-delay: 2s;
}

.animated.delay-3s {
animation-delay: 3s;
}

.animated.delay-4s {
animation-delay: 4s;
}

.animated.delay-5s {
animation-delay: 5s;
}

.animated.fast {
animation-duration: 800ms;
}

.animated.faster {
animation-duration: 500ms;
}

.animated.slow {
animation-duration: 2s;
}

.animated.slower {
animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
.animated {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
animation-iteration-count: 1 !important; 
}
}
/* END ANIMATE CSS */
/* FLIP.CSS */
@keyframes flip {
from {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}

40% {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}

50% {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}

80% {
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in;
}

to {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in;
}
}

.animated.flip {
backface-visibility: visible;
animation-name: flip;
}
/* END FLIP CSS */
/* MY STYLE */
body{
background: #555555;
}
#coin{
width: 21.5rem;
height: 21.5rem;
}
.coin-container{
display: flex;
justify-content: center;
align-content: center;
align-items: center;
margin-top:15vh;
}
/* END MY STYLE */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="moneta.js" defer></script>
<title>Document</title>
</head>
<body>
<div class="coin-container">
<img src="https://qph.fs.quoracdn.net/main-qimg-57e97e36918b359f28e86b8cbf567436.webp" id="coin">
</div>


</body>
</html>

欢迎来到stackoverflow。我只想指出一些非常在使用stackoverflow提问时需要记住的重要事项。您必须制作一个问题的最小且可复制的示例，并在您的帖子中提供实际错误。作为参考，请参阅社区关于如何发布好问题的指南。

我确实有机会在jsfiddle中运行您的代码，您代码的javascript部分似乎运行得很好。问题似乎来自css

@media (print), (prefers-reduced-motion: reduce) {
.animated {
animation-duration: 1ms !important;
transition-duration: 1ms !important;
animation-iteration-count: 1 !important; 
}
}

相关内容

最新更新

热门标签：