“摇晃效应”仅持续一个圆周

Question

我正在尝试制作一个来回摇晃并变小的元素，然后在点击时将其重置为原始大小。问题是当点击时，它似乎经历了大小周期，但在第一个之后，它将不再动摇。如果尝试在这里和那里移动功能，但似乎没有任何工作。我的代码中是否有任何错误导致此错误？

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;

function cl() {
  width = width / 1.1;
  height = height / 1.1;
}

function clicked() {
  document.getElementById('box').onclick = function() {
    var div = document.getElementById('box'),
      deg = rotated ? 0 : 30;

    div.style.webkitTransform = 'rotate(' + deg + 'deg)';
    div.style.mozTransform = 'rotate(' + deg + 'deg)';
    div.style.msTransform = 'rotate(' + deg + 'deg)';
    div.style.oTransform = 'rotate(' + deg + 'deg)';
    div.style.transform = 'rotate(' + deg + 'deg)';
    setInterval(res, 140);
  }
}

function res() {
  var div = document.getElementById('box'),
    deg = rotated ? 0 : 0;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}





setInterval(gamerule, 10);

function gamerule() {
  var div = document.getElementById('box');
  div.style.width = width + "%";
  div.style.height = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;

    function ser() {
      document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}

body {
  background-color: #ccc;
}

#cont {
  width: 90%;
  height: 104%;
  background-color: white;
  position: absolute;
  left: 65px;
  top: -30px;
}

#box {
  background-color: black;
  width: 15%;
  height: 24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 35.7%;
  left: 41.7%;
}

<div id="cont" onclick="cl()">
  <div id="box" onclick="clicked()">

  </div>
</div>

Answer 1

您需要在deg内更改cl的分配，因为此时它始终设置为0：

deg = rotated ? 0 : 30; // Or whatever value you want...

然后你需要反转rotated

的值

rotated = !rotated;

希望我能正确理解你的问题......

＆＃13;

＆＃13;

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;
var interval;

function cl() {
  width = width / 1.1;
  height = height / 1.1;
}

function clicked() {
    var div = document.getElementById('box'),
      deg = rotated ? 0 : 30;

    div.style.webkitTransform = 'rotate(' + deg + 'deg)';
    div.style.mozTransform = 'rotate(' + deg + 'deg)';
    div.style.msTransform = 'rotate(' + deg + 'deg)';
    div.style.oTransform = 'rotate(' + deg + 'deg)';
    div.style.transform = 'rotate(' + deg + 'deg)';
    if (interval == null) {
      interval = setInterval(res, 140);
    }
}

function res() {
  var div = document.getElementById('box'),
    deg = rotated ? 0 : 45;
  rotated = !rotated;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}





setInterval(gamerule, 10);

function gamerule() {
  var div = document.getElementById('box');
  div.style.width = width + "%";
  div.style.height = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;

    function ser() {
      document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}

＆＃13;

body {
  background-color: #ccc;
}

#cont {
  width: 90%;
  height: 104%;
  background-color: white;
  position: absolute;
  left: 65px;
  top: -30px;
}

#box {
  background-color: black;
  width: 15%;
  height: 24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 35.7%;
  left: 41.7%;
}

＆＃13;

<div id="cont" onclick="cl()">
  <div id="box" onclick="clicked()">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

所以看起来你有一堆垃圾代码所以我删除了它。你还有一个setInterval而不是setTimeout。

＆＃13;

＆＃13;

var rotated = false;
var height = 24.6;
var width = 15

var points = 0;
document.querySelector("#box").addEventListener("click", clickFunction);
// Call this function to simulate the click
function clickFunction() {
  width = width / 1.1;
  height = height / 1.1;
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 30;

  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";
  // You had set Interval I changed it to setTimeout
  setTimeout(res, 140);
}

 function res() {
  var div = document.getElementById("box"),
      deg = rotated ? 0 : 0;
  div.style.webkitTransform = "rotate("+deg+"deg)";
  div.style.mozTransform    = "rotate("+deg+"deg)";
  div.style.msTransform     = "rotate("+deg+"deg)";
  div.style.oTransform      = "rotate("+deg+"deg)";
  div.style.transform       = "rotate("+deg+"deg)";
}





setInterval(gamerule, 10);
function gamerule() {
  var div = document.getElementById("box");
  div.style.width           = width + "%";
  div.style.height          = height + "%";

  if (width < 1) {
    width = 15;
    height = 24.6;
    document.getElementById("cont").style.pointerEvents = "none";
    setInterval(ser, 1000);
    points++;
    function ser() {
        document.getElementById("cont").style.pointerEvents = "all";
    }
  }
}

＆＃13;

body{
  background-color:#ccc;
}
#cont{
  width:90%;
  height:104%;
  background-color:white;
  position:absolute;
  left:65px;
  top:-30px;
}
#box{
  background-color:black;
  width:15%;
  height:24.6%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position:absolute;
  top:35.7%;
  left:41.7%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="cont">
      <div id="box">

      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

＆＃13;

＆＃13;

＆＃13;