1

是否可以使用 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，而不是将其从 750 像素设置为 200 像素。我知道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>

但这不是我想做的。那么它可能以某种方式吗？

4

1 回答 1

0

假设你只是想要一个过渡，看看 jQuery 动画：http ://api.jquery.com/animate/

它会让这样的事情变得微不足道。

于 2013-02-07T02:04:05.943 回答