JSFiddle - React, Tailwind, and code Playground

by ryanwfiorini

HTML

<html>
    <body>
        <div id="test" style="width:50px;height:50px;background:red; -webkit-tranform:translate(10px,10px)"></div>
    </body>
</html>

JavaScript

function animate(el,params)
{
     var counter=0;
     var time=parseInt(params["time"]);
     var x=params["x"];
     var y=params["y"];
     var intervals=Math.ceil(time/10);
     var stepX=x>0?x/intervals:0;
     var stepY=y>0?y/intervals:0;
    var mov=function(el,x,y){
       el.style.msTransform="translate("+x+"px,"+y+"px)";
        console.log(x,y);
        counter++;
        if(counter<intervals)
         window.setTimeout(function(){
           mov(el,stepX+x,stepY+y);   
        },10);
    }
    
    mov(el,stepX,stepY);
}
var obj={
    x:200,
    y:0,
    time:1000};
//animate($("#test")[0],obj)


var cssClassess={};
(function(){

    for(var j=0;j<document.styleSheets.length;j++){
        var rules = document.styleSheets.item(j).cssRules;
        for (var i = 0; i < rules.length; i++) {
            var name=rules.item(i).selectorText;
            var text=rules.item(i).cssText.replace(name,"").replace("{","").replace("}","");
            var names=name.split(",");
            var k=0;
            do {
            if(names[k].indexOf(".")==0)
               names[k]=names[k].substr(1);
            if(names[k].indexOf("#")==0)
               names[k]=names[k].substr(1);
            cssClassess[names[k]]=text;
            k++;
            }while(names[k]);
        }
    }
})();


function setCssProperties(object){
    if(cssClassess[object.className])
        object.style.cssText=cssClassess[object.className];
}


jQuery(function() {

    if(!jQuery.browser.msie) return;

    if(Transformie.stylesheets)
        Transformie.parseStylesheets();
    
    if(Transformie.inlineCSS) {
        jQuery(Transformie.inlineCSS === true ? '*' : Transformie.inlineCSS).each(function() {
            if(Transformie.resolveCSSKey(this.style))
                Transformie.refreshMatrix(this, Transformie.resolveCSSKey(this.style));
        });
    }
    
    if(Transformie.trackChangesFor) {
        Transformie.bindChangeEvent(Transformie.trackChangesFor);
    }
   ...