Javascript applied CSS3 transitions not working on new element

Question

I'm using a mixture of CSS/JS to create some simple page slide transitions for new pages, that will eventually be loaded dynamically by AJAX, however on creation of the new element "main2" which has the necessary -webkit-transition etc. it does not slide in like it should, but simply appears. The previous page however slides out fine, using basically the same code.

As well as this, changing the slide in to after the animation for the previous page has finished like so:

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);
}

makes it animate in, just not at the right time.

Any help would be appreciated, I'm sure it's just something glaringly simple that I've missed.

Demo: JSFiddle

Answer 1

Try this: http://jsfiddle.net/5raj05th/8/

I changed the code so you do trigger the transition by adding the style:

newMain.style.left = "100vw";

and later:

newMain.style.left = "0";