JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div id="box"></div>

CSS

#box {
    width: 50px;
    height: 50px;
    background: #696969;
}

JavaScript

function getVendorPrefix()
{
    if('result' in arguments.callee) return arguments.callee.result;

    var regex = /^(Moz|Webkit|Khtml|O|ms|Icab)(?=[A-Z])/,
        element = document.body,
        prefix = '';

    for(var prop in element.style) if(regex.test(prop)) {
        prefix = prop.match(regex)[0];
        break;
    }

    if('WebkitOpacity' in element.style) prefix = 'Webkit';
    if('KhtmlOpacity' in element.style) prefix = 'Khtml';

    return arguments.callee.result = {
        prefix: prefix,
        cssPrefix: '-' + prefix.toLowerCase() + '-'
    };
}

var cssPrefix = getVendorPrefix().cssPrefix;

var box = document.getElementById('box');
box.style[cssPrefix + 'transition'] = 'all 1s ease';
setTimeout(function () {
    console.log(cssPrefix + 'transform');
    box.style[cssPrefix + 'transform'] = 'translateX(100px)';
}, 0)