Untitled

dabblet.css

body {
    background: #222
}

div {
    height: 200px;
    width: 200px;
    position:absolute;
    background: #f51;
    transition: left .5s ease;
}

.left { left: 50px }
.right { left: 500px }

dabblet.js

// Remove leftover divs from previous run
var element = document.getElementsByTagName("div");
for (index = element.length - 1; index >= 0; index--) {
    element[index].parentNode.removeChild(element[index]);
}

// Create a new div dynamically
var div = document.createElement("div");

// Initialize class to "left"
div.setAttribute("class", "left");

// Add it
document.body.appendChild(div);

// Switch the class so the transition triggers.
window.setTimeout(function(){
    div.setAttribute("class", "right");
},50); // Why won't the transition trigger with short or no delay?

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}