JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<button onclick="go()">Run</button><br>

CSS

.test {
    height: 50px;
    width: 50px;
    background-color: red;
    position: absolute;
    -webkit-transition: all 2s ease-in-out;
}

JavaScript

function go() {
    var obj = document.getElementById("testObj");
    var val;
    if (obj.style.top == "-50px") {
        val = "200px";
    } else {
        val = "-50px";
    }
    obj.style.top = obj.style.left = val;
}

var o = document.createElement("div");
o.className = "test";
o.id = "testObj";
o.style.top = o.style.left = "-50px";
document.body.appendChild(o);
// force layout
var x = o.clientHeight;

o.style.top = o.style.left = "200px";