是否可以使用 javascript 创建一个新元素并将其添加到 body，然后使用 css 自动为其设置动画？这是我的测试页
<body>
<script>
function menuMain(){
Title = document.createElement("div");
Title.style.left = "750px";
Title.style.webkitTransition = "4s";
Title.style.fontSize = "30px";
Title.style.position = "fixed";
Title.style.color = "red";
Title.id = "titleid";
Title.innerHTML = "Menu Title";
document.getElementsByTagName("body")[0].appendChild(Title);
Title.style.left = "200px";
}
menuMain();
</script>
</body>
但它只是自动将对象放置在 left:200px 处，而不是将其从 750px 设置为 200px。
我知道 Title.style.webkitTransition = "4s" 可以工作，因为当我检查元素时，它就在元素的样式中
我也试过更换
Title.style.left = "200px";
与
document.getElementById("titleid").style.left = "200px";
但它只是做同样的事情。
我知道当我手动创建元素时，然后用它从 left:750px 到 left:200px 动画的 javascript 改变
<body>
<div id="titleid" style="-webkit-transition:4s;position:absolute;color:red;font-size:30px;left:750px;">Menu Title</div>
<script>
function menuMain(){
document.getElementById("titleid").style.left = "200px";
}
menuMain();
</script>
</body>
但这不是我想做的。那么有可能吗？
最佳答案
假设您只想要一个过渡，看看 jQuery 动画:http://api.jquery.com/animate/
它将使这样的事情变得微不足道。
关于javascript - 使用 javascript 创建元素，然后使用 css 对其进行动画处理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14742331/