时间戳

首页 > 解决方案 > 为什么 document.getElementById().style.transform="translateX()" 的“转换”只会翻译一次？

javascript - 为什么 document.getElementById().style.transform="translateX()" 的“转换”只会翻译一次？

问题描述

我正在制作一个新的在线游戏。当我单击一个按钮时，我希望红色方块在 X 轴上平移 50 像素。这是HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>cake (singleplayer 2d adventure game)</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <script>
      function moveright() {
        document.getElementById("master-cube").style.transform = "translateX(50px)";
      }
    </script>
    <div id="master-cube"></div><img src="arrows/rightarrow.png" alt=h"Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
    <img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
    <img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
    </body>
</html>

我知道图像不会加载。如果向下滚动，您会找到一个 Repl.it。

这是CSS：

html {margin: none;}

body {margin: none; width: 100vw; height: 100vh;}

.arrowcontrols {float: right; margin-right: 5px; margin-top: 90%; margin-bottom: 10%;}

#master-cube {background-color: #FF0000; height: 40px; width: 40px;}

如果你想看 Repl.it，这里是它的链接： https ://repl.it/@ritzcrackerz201/cake

标签： javascripthtmlcss

解决方案

那是因为你的元素transform: translateX(50px)一旦你设置了它。它总是在那里，并且再次将其设置为相同的东西不会做任何事情。

您必须将其设置为其他内容，例如：

let displacement = 50;

function moveright() {
  document.getElementById("master-cube").style.transform = `translateX(${displacement}px)`;
  displacement += 50;
}
html {
  margin: none;
}

body {
  margin: none;
  width: 100vw;
  height: 100vh;
}

.arrowcontrols {
  margin-right: 5px;
  margin-top: 10%;
  margin-bottom: 10%;
}

#master-cube {
  background-color: #FF0000;
  height: 40px;
  width: 40px;
}
<div id="master-cube"></div><img src="arrows/rightarrow.png" alt="Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">

既然您在评论中询问它是如何工作的，它是：

您需要将其设置为翻译不同的金额。否则，如果你只是翻译它50px，那么它总是翻译50px（从原始位置），没有区别。

所以这就是为什么你需要将它翻译 100 像素或 150 像素等等。所以一种方法是有一个变量，并将其设置为 50，每次翻译时，将其翻译该数量，然后将 50 增加到 100，然后增加到 150，等等。

的使用

`translateX(${displacement}px)`

称为字符串插值，您可以在此处查找。

一些程序员可能会认为这样的变量不好，因为它在全局范围内，其他代码也可以更改它，并且他们会以某种方式将变量隐藏为私有变量。（实际上是通过在 JavaScript 中将其封闭在本地范围内。但现在不要担心。）

由于您似乎只是在编程，您还可以添加transition: all 1s到移动对象以使其翻译更顺畅：

let displacement = 50;

function moveright() {
  document.getElementById("master-cube").style.transform = `translateX(${displacement}px)`;
  displacement += 50;
}
html {
  margin: none;
}

body {
  margin: none;
  width: 100vw;
  height: 100vh;
}

.arrowcontrols {
  margin-right: 5px;
  margin-top: 10%;
  margin-bottom: 10%;
}

#master-cube {
  background-color: #FF0000;
  height: 40px;
  width: 40px;
  transition: all 1s;
}
<div id="master-cube"></div><img src="arrows/rightarrow.png" alt="Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">

推荐阅读