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 (!isRotated) {
    document.getElementById("signUpBtn").style.transform = "rotateY(90deg)";
    isRotated = 1;
} 

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

在第一个if（）中分配isRotated = 1之后，第二个if（）也会被执行，因为它的条件已满足。

要避免这种情况，只需为第二个if（）

添加else语句

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

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

Answer 2

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

您需要使元素内联块或阻止以使轮换生效。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

你也可以只使用这样的CSS：

＆＃13;

#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);
    ;
  }
}

＆＃13;

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

＆＃13;

Answer 3

如何设置

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

Answer 4

实际上还有更多的问题;我在该div上创建了一个包装div添加了css transform。现在它可以工作

document.getElementById("signUpBtn").onmouseover = rotateBtn;
document.getElementById("signUpBtn").onmouseout = unrotateBtn;

function commonStyle() {
document.getElementById("wrapperDiv").style.transformOrigin = "top center";
document.getElementById("wrapperDiv").style.transition = "1s ease-in-out";
}

function rotateBtn() {
commonStyle()
document.getElementById("wrapperDiv").style.transform = "rotate(90deg)";
}

function unrotateBtn() {
commonStyle()
document.getElementById("wrapperDiv").style.transform = "rotate(0deg)";
}

div {
  height:100px;
  width:100px;
}

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

Answer 5

如果你想使用jQuery，

function rotateBtn() {
var isRotated = 0; // boolean value
$("signUpBtn").css("transformOrigin","top center");
$("signUpBtn").css("transition","1s ease-in-out");
    if (!isRotated) {
        $("signUpBtn").css("transform", "rotateY(90deg)");
        isRotated = 1;
    } 

    if (isRotated) {
        $("signUpBtn").css("transform", "rotateY(0deg)");
        isRotated = 0;
    }
}

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

5 个答案: