Javascript 为什么我的旋转动画只在按下按钮时工作一次？

当按下提交按钮时，我需要旋转所有图像。但是，这仅在第一次按下按钮时发生（直到下一页刷新）。当按下按钮并且旋转动画在css中时，我使用jquery向图像添加和删除类

我把代码缩短到这个，怎么了？提前谢谢

函数dicerll（）{
$（“.dice”）.removeClass（“旋转”）；
$（“.dice”）.addClass（“旋转”）；
}
document.getElementById（“提交”）.addEventListener（“单击”），函数（e）{
e、 预防默认值（）；
骰子卷（）；
})

/*图像*/
img{
宽度：70px；
线高：0；
利润率：0.1%；
显示器：flex；
证明内容：中心；
显示：内联；
}
身材{
显示：内联块；
垂直对齐：中间对齐；
}
.轮换{
动画：旋转0.1s无限线性；
动画迭代次数：2次；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

dicey
你好
掷骰子

我觉得这可以通过好的ol'css方式完成

只需在您的应用程序中进行以下更改：

css文件

img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

js文件

img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

---

我觉得这可以通过好的ol'css方式来完成

只需在您的应用程序中进行以下更改：

css文件

img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

js文件

img {
  width: 70px;
  line-height: 0;
   margin: 0 1%;
   display: flex;
   justify-content: center;
   display: inline;
}
 

figure {
  display: inline-block;
  vertical-align: middle;
}

.rotate {
  animation: rotation 0.1s infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(360deg)
  }
  100% {
    transform: rotate(0deg);
  }
}

let a = document.querySelectorAll('.dice')
function diceRoll() {
  a.forEach(elem => {
    elem.classList.add("rotate");
    setTimeout(()=>{
      elem.classList.remove("rotate")
    }, 200)
  })

}

document.getElementById("submit").addEventListener("click", function(e) {
  e.preventDefault();
  diceRoll();

})

---

您可以尝试收听动画结束，并在旋转时禁用go按钮

function diceRoll() {
  $("a#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("a#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

函数dicerll（）{
$（“#提交”）.addClass（“已禁用”）
$（“.dice”）.addClass（“旋转”）；
$（“.dice”）.on（“webkitAnimationEnd oanimationend msAnimationEnd animationend”，函数（）{
$（“#提交”）.removeClass（“已禁用”）
$（“.dice”）.removeClass（“旋转”）；
})
}
document.getElementById（“提交”）.addEventListener（“单击”），函数（e）{
e、 预防默认值（）；
骰子卷（）；
})

img{
宽度：70px；
线高：0；
利润率：0.1%；
显示器：flex；
证明内容：中心；
显示：内联；
}
身材{
显示：内联块；
垂直对齐：中间对齐；
}
.轮换{
动画：旋转0.1s无限线性；
动画迭代次数：2次；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

迪西
你好
掷骰子

您可以尝试收听动画结束，并在旋转时禁用go按钮

function diceRoll() {
  $("a#submit").addClass("disabled")
  $(".dice").addClass("rotate");
  $(".dice").on("webkitAnimationEnd oanimationend msAnimationEnd animationend", function() {
    $("a#submit").removeClass("disabled")
    $(".dice").removeClass("rotate");
  })
}

函数dicerll（）{
$（“#提交”）.addClass（“已禁用”）
$（“.dice”）.addClass（“旋转”）；
$（“.dice”）.on（“webkitAnimationEnd oanimationend msAnimationEnd animationend”，函数（）{
$（“#提交”）.removeClass（“已禁用”）
$（“.dice”）.removeClass（“旋转”）；
})
}
document.getElementById（“提交”）.addEventListener（“单击”），函数（e）{
e、 预防默认值（）；
骰子卷（）；
})

img{
宽度：70px；
线高：0；
利润率：0.1%；
显示器：flex；
证明内容：中心；
显示：内联；
}
身材{
显示：内联块；
垂直对齐：中间对齐；
}
.轮换{
动画：旋转0.1s无限线性；
动画迭代次数：2次；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

迪西
你好
掷骰子

最有可能的原因是脚本删除并重新添加类，而没有给浏览器时间进行调整。也要保持一致<代码>$（“#提交”）。在（“单击”，骰子卷）@mplungjan Wow当我这样做时，它现在正在工作…知道为什么吗？“然而，在我的实际代码中，当按下按钮时，我有不止一个骰子卷要运行”-我们只能运行提供的一个-请确保包括所有相关的细节，如此（不需要详细说明，只是有更多内容）很可能这与脚本删除和添加类有关，没有给浏览器调整时间。也要保持一致。

$（“#提交”）。在（“单击”，骰子滚动）

@mplungjan哇当我这样做时，它现在正在工作……知道为什么吗？“然而，在我的实际代码中，当按下按钮时，我有不止一个骰子要运行”-我们只能运行一个所提供的-请确保包含所有相关细节，如此（不需要细节，只需要更多）谢谢！所以我假设如果没有听到事件结束，提交按钮仍然处于活动状态-这就是问题所在？还有，为什么是

$（“a#submit”）

而不是

$（“#submit”）

？@argonx是的，因为转换需要时间，所以最好是听它的事件以避免混乱。关于

$（“a#submit”）

我只想更清楚地指定它（

一个id为submit的标记

）。让它

$（“#提交”）

仍然可以正常工作谢谢！所以我假设如果没有听到事件结束，提交按钮仍然处于活动状态-这就是问题所在？还有，为什么是

$（“a#提交”）

而不是

$（“#提交”）

？@argonx是的，因为转换需要时间，所以最好听它的事件以避免混乱。关于

$（“a#submit”）

我只想更清楚地指定它（

id为submit的标记

），保留它

$（“#submit”）

应该还能正常工作嘿@argonx，我很高兴听到这个消息！给你一个建议，在任何帖子上投票