<html>
<head>
<title>Singularity</title>
<style>
body {
background-color: grey;
}
#boxOne {
position:relative;
height:150px;
width:150px;
background-color: black;
}
</style>
<script>
function playOne(){
document.getElementById("boxOne").style.left = "30px";
document.getElementById("boxOne").style.transition = "all 4s";
}
</script>
</head>
<body>
<div id="boxOne" onclick="playOne()"></div>
</body>
</html>
上面的代码在框从左到右移动的范围内一直有效。我曾经style.transition成功地使用过从左到右缓慢移动一个圆的功能，但是此框的行为与我尝试将其移动的方式不一样。该框不应立即从左移到右，它应按照style.transition脚本中的说明花费4秒。不明白我在做什么错。
您还需要设置一个从样式表开始的值（所有浏览器都不会采用默认值）
function playOne() {
document.getElementById("boxOne").style.left = "30px";
document.getElementById("boxOne").style.transition = "all 4s"; //might be coherent to declare this at first
//or even straight in the style sheet
}body {
background-color: grey;
}
#boxOne {
position: relative;
height: 150px;
width: 150px;
left: 0;
/* added this, so calculation can be done from an earlier css value*/
background-color: black;
}<div id="boxOne" onclick="playOne()"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句