javascript - 如何获得具有多个案例的动画功能，这些案例控制 Javascript 中的 CSS 值进行渲染？

Question

我正在尝试设置我的 Java 脚本，以便我可以动画一个对象从屏幕的顶部到底部一遍又一遍地调用不同的项目以随机下降。现在我想不出让其中一个物体掉下来。

我已经尝试通过我的 CSS 通过 java 脚本添加 css，但我不确定这是最好的选择。

function myMove() {

  var elem = document.getElementsByClassName("boxcontainer");
  var pos = 0;
  var id = setInterval(frame, 725);

  function frame() {
    if (pos == 725) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + "25px";
    }
  }
}

elem.addEventListener("mousedown", function turnTetrisleft() {
  switch (keycode) {
    case Key.LEFT:
      elem.style.transform.rotateX() += 90 + "deg";
      break;
    case Key.RIGHT:
      elem.style.transform.rotateX() -= 90 + "deg";
      break;
    default:
      elem.style.transform.rotateX() += "";
  }
});

.boxcontainer {
  position: absolute;
  left: 750px;
  top: 25px;
  width: 50px;
  height: 50px;
}

<div class="tetris-display">

  <div class="tetris-item">
    <div class="boxcontainer">
      <div class="block">
        <div class="innerblock block"></div>
      </div>
      <div class="block">
        <div class="innerblock block"></div>
      </div>
      <div class="block box">
        <div class="innerblock block"></div>
      </div>
      <div class="block box">
        <div class="innerblock block"></div>
      </div>
    </div>
  </div>

我看不到任何事情发生。我有几个关于括号的错误，但我目前看不到任何错误

标签： javascripthtml

Answer 1

这个

elem.style.transform.rotateX() += 90 + "deg";

看起来不正确。elem.style.transform是一个没有方法的字符串rotateX()

你应该把它写成

var angle = ...;
angle += 90;
elem.style.transform = angle.toString() + "deg";