用JavaScript創建元素，然後用css動畫它

是否有可能用javascript創建一個新元素並將其添加到主體，然後自動使用css爲其設置動畫效果？這是我的測試頁面用JavaScript創建元素，然後用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 200像素。我知道Title.style.webkitTransition = "4s"作品，因爲當我檢查元素它的存在在該元素的風格

我也試圖與

document.getElementById("titleid").style.left = "200px";

更換

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

，但是這不是我想做的事情。那麼它可能以某種方式？

來源

2013-02-07 Greg Hornby

我覺得問題是瀏覽器讀取左邊：200px;後左：700px;所以它從不知道從一個點過渡到另一個點。它只是把它放在200px。它可能在您手動執行時發揮作用，因爲它實際上必須使用一組數字才能使用，並且HTML會在js之前呈現。 – mToce

假設你只想要一個過渡，看看jQuery的動畫：

它會讓這樣的事情微不足道。

來源

2013-02-07 02:04:05 Julio

會做。但是有可能在傳統的JavaScript中做到這一點並不複雜？如果沒有，我將不得不解決jquery –

嗯，我試過jquery，它的作品就像一個魅力。：）謝謝。我一直在猶豫如何使用jquery，但似乎我可能會在將來更多地使用它; P –

用JavaScript創建元素，然後用css動畫它

回答

相關問題