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

Question

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

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

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