过渡前动态设置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）来强制浏览器布局。
• requestAnimationFrame在应用您的transform.

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