在转换之前动态设置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 ）来强制浏览器布局。
• 在应用transform之前使用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