Question

我正在尝试模拟鼠标动画。我想动态设置位置，然后用css转换移动它。到目前为止，我能够获得一个移动鼠标的程序。但是，我无法使用javascript动态设置初始位置。我的代码如下所示：

这是CSS

.cursorDiv {
  width: 30px;
  height: 30px;
  transform: translate(0px,0px);
  transition: 2s ease;
}

.cursorDivMoved {
  transform: translate(100px,200px);
}

这是javascript：

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-                    style/512/cursor.png";
document.body.appendChild(cursorDiv);

setTimeout(function() {
  $(".cursorDiv").toggleClass("cursorDivMoved");
}, 1000);

//cursorDiv.style.transform="translate(100px,50px)";

当我运行它时它工作正常。但是，当我尝试使用javascript（取消注释最后一行）更改初始位置时，则不再发生转换。

这是一个演示：

https://jsfiddle.net/fmt1rbsy/5/

Answer 1

如果以编程方式直接在元素上设置M-x compile属性（如果要通过JS将其移动到任意位置，则需要它），它将覆盖类中指定的任何style.transform。因此，稍后添加transform类不会转换（转换/移动）它。

您必须通过指定其"cursorDivMoved"属性继续移动它，或者只是删除它：style.transform

演示：https://jsfiddle.net/fmt1rbsy/9/

您可能还想让第一个cursorDiv.style.transform = null过渡。在这种情况下，您必须等待浏览器在元素的起始位置进行初始布局，否则它将看不到转换（在应用转换后，它将直接看到，即在最后的位置）。你可以：

使用小（但非零）translate为浏览器提供一些时间进行初始布局。

尝试访问某些需要浏览器计算页面布局的属性（例如setTimeout），强制执行浏览器布局。

在应用document.body.offsetWidth之前使用2个嵌套requestAnimationFrame。

演示：https://jsfiddle.net/fmt1rbsy/8/

Answer 2

这是你在找什么？告诉我它是否可以改进。打开控制台并将班级名称更改为cursorDivMoved。

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.id = 'cursorDiv';
cursorDiv.src = "https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);

#cursorDiv {
width:30px;
height:30px;
-o-transition: 2s ease;
-moz-transition: 2s ease;
-webkit-transition: 2s ease;
-ms-transition: 2s ease;
transition: 2s ease;
}
.cursorDivMoved {
-o-transform:translate(100px, 200px);
-moz-transform:translate(100px, 200px);
-webkit-transform:translate(100px, 200px);
-ms-transform:translate(100px, 200px);
transform:translate(100px, 200px);
}

Answer 3

您可以定义初始位置（x，y），然后当用户点击该位置时会增加并设置为'cursorDiv'，例如：

var cursorDiv = document.createElement("img");
cursorDiv.className = "cursorDiv";
cursorDiv.src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/cursor.png";
document.body.appendChild(cursorDiv);
var x = 100, y = 50;
setTimeout(function() {
  cursorDiv.style.transform="translate(100px,50px)";
}, 1000);

$(document).click(function () {
    x+= 20;
            y += 50;
    var str = "translate(" + x + "px," + y + "px)";
    cursorDiv.style.transform=str;
        });

这是Demo

在转换之前动态设置css转换

3 个答案: