javascript - 在转换前动态设置 css 转换

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

如果您以编程方式直接在您的元素上设置 style.transform 属性(如果您想通过 JS 将其移动到任意位置，则需要该属性)，它将覆盖任何 transform 在类中指定。因此，稍后添加 "cursorDivMoved" 类不会对其进行转换(翻译/移动)。

您必须通过指定其 style.transform 属性来继续移动它，或者干脆将其删除:cursorDiv.style.transform = null

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

您可能还希望转换第一个 translate。在这种情况下，您必须等待浏览器在您的元素的起始位置进行初始布局，否则它将看不到过渡(它会在应用转换后直接看到它，即在其最终位置)。您可以:

• 使用一个小的(但非零)setTimeout 给浏览器一些时间来进行初始布局。
• 通过尝试访问某些需要浏览器计算页面布局的属性(例如 document.body.offsetWidth)来强制浏览器布局。
• 在应用您的转换之前使用 2 个嵌套的 requestAnimationFrame。

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