requestAnimationFrame在鼠标点击前无效
用css的transition和requestAnimationFrame实现一个动画，但似乎遇到了一点玄学问题。
先单击空白的地方后，再点击提交才会有动画
刷新页面，不要点击空白地方，直接提交，不会有动画
代码只有40行，求解答！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>codeRoot's JavaScript</title>
<script type="text/javascript">
var pos = 0;
function disableBeforeClickBlank(){
var element = document.createElement("div");
pos+=100;
document.querySelector(".my").appendChild(element);
// var element = document.getElementById("my");
element.setAttribute("class", "tile");
element.setAttribute("style", "left:0px");
element.textContent = 'text';
window.requestAnimationFrame(function () {
element.setAttribute("style", `left:${pos}px`);
});
}
</script>
<style type="text/css">
.tile {
position: absolute;
left: 0px;
background: #eee4da;
text-align: center;
font-weight: bold;
font-size: 55px;
transition: 1000ms ease-in-out;
</style>
</head>
<body>
<input type="submit" onclick="disableBeforeClickBlank()">
<div class="my"></div>
</body>
</html> 