Question

我使用CSS / JS的混合为新页面创建一些简单的页面幻灯片转换，最终将由AJAX动态加载，但是在创建新元素时＃34; main2＆＃34;它具有必要的-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过渡不适用于新元素

1 个答案: