Javascript 已应用 CSS3 过渡不适用于新元素

Question

我正在混合使用 CSS/JS 为新页面创建一些简单的页面幻灯片过渡，最终将由 AJAX 动态加载，但是在创建新元素时 "main2" 它有必要的 -webkit-transition 等。它不会像它应该的那样滑入，而只是出现。然而，上一页使用基本相同的代码可以很好地滑出。

除此之外，将上一页动画结束后的滑入更改为：

function newPage() {
    var newMain = document.createElement("div");
    newMain.className = "main";
    newMain.style.left = "100vw";
    newMain.id = "main2";
    newMain.style.zIndex = 1999;
    newMain.style.background = "#AAA";
    document.body.appendChild(newMain);
    oldMain = document.getElementById("main");
    oldMain.style.left = "-50vw";

    setTimeout(function() {
        newMain.style.left = "50vw";
        oldMain.parentNode.removeChild(oldMain);
        newMain.id = "main";
    }, 1000);
}

让它动画化，只是时间不对。

如有任何帮助，我将不胜感激，我确信这只是我错过的非常简单的事情。

演示：JSFiddle

Answer 1

试试这个：http://jsfiddle.net/5raj05th/8/

我更改了代码，因此您可以通过添加样式来触发转换：

newMain.style.left = "100vw";

及以后：

newMain.style.left = "0";

Javascript 已应用 CSS3 过渡不适用于新元素

Javascript applied CSS3 transitions not working on new element

html

javascript

css

css-transitions