我正在尝试模拟鼠标动画。我想动态设置位置,然后用 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 更改初始位置(取消注释最后一行)时,转换不再发生。
这是一个演示:
最佳答案
如果您以编程方式直接在您的元素上设置 style.transform
属性(如果您想通过 JS 将其移动到任意位置,则需要该属性),它将覆盖任何 transform
在类中指定。因此,稍后添加 "cursorDivMoved"
类不会对其进行转换(翻译/移动)。
您必须通过指定其 style.transform
属性来继续移动它,或者干脆将其删除:cursorDiv.style.transform = null
演示:https://jsfiddle.net/fmt1rbsy/9/
您可能还希望转换第一个 translate
。在这种情况下,您必须等待浏览器在您的元素的起始位置进行初始布局,否则它将看不到过渡(它会在应用转换后直接看到它,即在其最终位置)。您可以:
- 使用一个小的(但非零)
setTimeout
给浏览器一些时间来进行初始布局。 - 通过尝试访问某些需要浏览器计算页面布局的属性(例如
document.body.offsetWidth
)来强制浏览器布局。 - 在应用您的
转换
之前使用 2 个嵌套的requestAnimationFrame
。
关于javascript - 在转换前动态设置 css 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33850916/