JavaScript 更改 CSS 在 if 语句中不起作用

Question

这是我的 html :

<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php" onmouseover="rotateBtn()"> Sign up &raquo;</a>

这是 JS...当我将它从 if 语句中取出时，样式更改不起作用。我需要 if 语句在两个旋转之间来回切换。 这样做是为了学习，想使用 JS 也想看看它是如何与 jQuery 一起工作的

function rotateBtn() {
var isRotated = 0;
document.getElementById("signUpBtn").style.transformOrigin = "top center";
document.getElementById("signUpBtn").style.transition = "1s ease-in-out";

if (!isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
    isRotated = 1;
} 

if (isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
    isRotated = 0;
}

Answer 1

我认为你不需要使用 if else 语句，你只需要在两个动画之间添加一个延迟。所以你可以试试这个:

您需要使您的元素inline-block 或block 才能使旋转起作用。

document.getElementById("signUpBtn").style.transformOrigin = "top center";
document.getElementById("signUpBtn").style.display = "inline-block";
document.getElementById("signUpBtn").style.transition = "1s ease-in-out";

function rotateBtn() {
  document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";

  setTimeout(function() {
    document.getElementById("signUpBtn").style.transform = "rotateY(0deg)";
  },1000);
}

<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php" onmouseover="rotateBtn()">
     Sign up &raquo;</a>

你也可以像这样只使用 CSS 来做到这一点:

#signUpBtn {
  display: inline-block;
  transform-origin: top center;
  transition: 1s ease-in-out;
}

#signUpBtn:hover {
  animation: rotate 2s;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  100% {
    transform: rotateY(0deg);
    ;
  }
}

<a class="btn btn-primary btn-lg" id="signUpBtn" href="./pages/createaccount.php">
     Sign up &raquo;</a>