Question

是否可以使用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";

但它只是做同样的事情。

我知道当我手动创建元素时，然后使用javascript向左更改它从left:750px动画到left:200px

<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>

但这不是我想要做的。可能不知何故？

Answer 1

假设您只想转换，请查看jQuery动画：http://api.jquery.com/animate/

这将使这样的事情变得微不足道。

使用javascript创建元素，然后使用css为其设置动画

1 个答案: