<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秒来移动。不明白我做错了什么。