style.transform = "rotate()" 不止一次？答案

【问题标题】：style.transform = "rotate()" more than once?style.transform = "rotate()" 不止一次？
【发布时间】：2019-08-24 19:34:20
【问题描述】：

当我点击一个复选框时，我有一个 svg 图像旋转 360 度。我使用 style.transform。但是当我取消选中时，它不会再这样做了。

有什么办法可以让它旋转不止一次而不刷新？

我尝试在“else”中包含相同的功能

<input type="checkbox" id="myCheck"  onclick="myFunction()">
<label for="myCheck"><img src="logo.svg" id="svg1"></label>

<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }
}
</script>

目前它只旋转一次。当我再次点击时它不会再次这样做。

【问题讨论】：

标签： javascript image-rotation

【解决方案1】：

嗯。为什么你的其他人也有 360 度？如果我是对的，你应该说

if(input.checked) document.getElementById("svg1").style.transform = "rotate(360deg)";
else document.getElementById("svg1").style.transform = "rotate(0)";

【讨论】：

【解决方案2】：

如果我错了，请纠正我。所以你想将 SVG 元素旋转 360 度？所以基本上如果你将一个元素旋转 360 度，你不会看到任何差异，因为它是一个完整的旋转。当然，transform 不会对您的旋转求和。

您可以根据需要添加过渡。

<input type="checkbox" id="myCheck"  onclick="myFunction()">
svg
<label for="myCheck"><img src="logo.svg" id="svg1"></label>


<script>
function myFunction() {
  var checkBox = document.getElementById("myCheck");
  document.getElementById("svg1").style.transition = "all 300ms ease-in"; 
  if (checkBox.checked == true){
    document.getElementById("svg1").style.transform = "rotate(360deg)";
  }else{
    document.getElementById("svg1").style.transform = "rotate(0deg)";
  }
}
</script>

【讨论】：