使用 javascript 创建元素，然后使用 css 对其进行动画处理答案

【问题标题】：Create Element with javascript then animate it with css使用 javascript 创建元素，然后使用 css 对其进行动画处理
【发布时间】：2013-01-22 10:24:56
【问题描述】：

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

但这不是我想做的。那么有没有可能？

【问题讨论】：

我认为问题是浏览器读取left:200px；左后：700px；所以它永远不知道从一个点过渡到另一个点。它只是把它放在200px。当您手动执行此操作时，它可能会起作用，因为它实际上必须使用一组数字才能使用，并且 HTML 在 js 之前呈现。

标签： javascript html css transitions createelement

【解决方案1】：

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

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

【讨论】：

会的。但是有可能在不太复杂的传统javascript中做到这一点吗？如果不是，我将不得不接受 jquery
嗯，我尝试了 jquery，它就像一个魅力。：）谢谢。我一直对使用 jquery 犹豫不决，但似乎我将来可能会更多地使用它；P