Question

我的目标是在每次点击时将div旋转180度，而不会切换CSS类。

我可以通过第一次点击（.style.transform = “ rotate（180deg）”;），但随后的任何点击均无效。

顺便说一句，那到底是为什么？ div的ID并未更改，因此从理论上讲，相同的触发器（在这种情况下为单击）应该调用相同的函数，对吗？但事实并非如此。我不知道这里的逻辑是什么，技术上的解释是什么，并且在实践中，如何再次操作该后div（即经过JavaScript操作的原始div），而又无需切换CSS类。

function rotate() {
    document.getElementById("container").style.transform = 
    "rotate(180deg)";
}

.container {
    width: 200px;
    height: 400px;
    border: 5px solid;
    border-bottom-color: blue;
    border-top-color: red;
}

<div class="container" id="container" onclick="rotate()"></div>

Answer 1

第一次将转换从""更改为"rotate(180deg)"，以便旋转。

随后您将其从"rotate(180deg)"更改为"rotate(180deg)"…根本就没有变化，所以什么也没发生。

如果要更改它，则实际上需要为其分配一个不同值。

例如

const style = document.getElementById("container").style;
if (style.transform) {
    style.transform = "";
} else {
    style.transform = "rotate(180deg)";
}

切换课程更加简单明了。

document.querySelector("#container").addEventListener("click", e => e.currentTarget.classList.toggle("rotated"));

.container {
  width: 200px;
  height: 400px;
  border: 5px solid;
  border-bottom-color: blue;
  border-top-color: red;
  transition: transform 0.25s;
}

.rotated {
  transform: rotate(180deg);
}

<div class="container" id="container"></div>

Answer 2

第一次调用函数后div不旋转的原因是您将transform style属性设置为恒定值（180度）。第一次调用后，将执行转换，随后的所有调用都将转换设置为完全相同的值。为了使它起作用，您每次调用该函数时都必须增加rotate属性。

例如：

let rotation = 0;

function rotate() {
    document.getElementById("container").style.transform =  `rotate(${rotation}deg)`;
    rotation = (rotation + 180) % 360;
}

Answer 3

我做了fiddle，但是基本上，您不能为相同的值旋转。当然这是很原始的，但是请您证明一下这个概念。您当然可以以编程方式进行更多操作。

document.getElementById('container').addEventListener('click', function () {
  this.style.transform = this.style.transform == "rotate(180deg)" ? "rotate(-90deg)" : "rotate(180deg)";
  }
);

您可以查看以下内容：tutorial

Answer 4

您需要检查变换值，然后逆时针旋转它。

代码如下：

HTML

<div class="container" id="container" onclick="rotate()"></div>

CSS

.container {
    width: 200px;
    height: 400px;
    border: 5px solid;
    border-bottom-color: blue;
    border-top-color: red;
}

JS

function rotate() {
    document.getElementById("container").style.transform = 
      document.getElementById("container").style.transform === 
    "rotate(180deg)" ? "rotate(0deg)" : "rotate(180deg)";
}

这里是codepen

中的一个示例

Answer 5

i < vec.size() - 1

显然没有经过优化，但可以为您提供帮助。

JSFiddle here

Answer 6

其他人已经回答了您的问题，所以我将提供一个示例来使您的代码更具动态性。

/**
* Rotate an <element> with a certain angle <rotateBy>
* 'this' is a reference to itself, which is passed by as an argument from the HTML.
* Change '180' in the method call to whatever to have it rotate differently.
*/

function rotate(element, rotateBy) {
  var currentRotation = element.rotation || 0;   // default to zero if not existing
      newRotation = rotateBy + currentRotation;

  element.rotation = newRotation;  // store the property in the element

  element.style.transform = "rotate(" + newRotation + "deg)";
}

.container {
    width: 200px;
    height: 400px;
    border: 5px solid;
    border-bottom-color: blue;
    border-top-color: red;

    transition: transform 400ms;
}

<div class="container" onclick="rotate(this, 180)"
></div>

使用纯Java脚本替代CSS类？

6 个答案: