JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<input type="button" value="tween [rotate]" id="b1" />
<input type="button" value="tween [scale]" id="b2" />
<input type="button" value="setStyle [rotate scale]" id="b3" />
<input type="button" value="tween [rotate scale]" id="b4" />

<br /><br /><input type="checkbox" id="chkUseCustomSetStyle" /> Use Custom setStyle
<br /><input type="checkbox" id="chkUseConsole" /> Use console.Log (FF with FB)

JavaScript

Fx.CSS.Parsers.extend({

    TransformRotate: {
        parse: function(value){
            return ((value = value.match(/^rotate\(([-+]?([0-9]*\.)?[0-9]+)deg\)$/i))) ? parseFloat(value[1]) : false;
        },
        compute: function(from, to, delta){
            return Fx.compute(from, to, delta);
        },
        serve: function(value){
            return 'rotate('+value+'deg)';
        }
    },

    TransformScale: {
        parse: function(value){
            return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false;
        },
        compute: function(from, to, delta){
            return Fx.compute(from, to, delta);
        },
        serve: function(value){
            return 'scale('+value+')';
        }
    }

});


Element.implement({
    
    setStyle: function(property, value){
        if ( (property=='-moz-transform') && ($('chkUseCustomSetStyle').checked)) {
            this.style[property] = ($type(value) == 'array' ? value.join(' ') : value);
            if ($('chkUseConsole').checked) console.log('Custom: ', this.style[property]);
        } else {
            switch (property){
                case 'opacity': return this.set('opacity', parseFloat(value));
                case 'float': property = (Browser.Engine.trident) ? 'styleFloat' : 'cssFloat';
            }
            property = property.camelCase();
            if ($type(value) != 'string'){
                var map = (Element.Styles.get(property) || '@').split(' ');
                value = $splat(value).map(function(val, i){
                    if (!map[i]) return '';
                    return ($type(val) == 'number') ? map[i].replace('@', Math.round(val)) : val;
                }).join(' ');
            } else if (value == String(Number(value))){
                value = Math.round(value);
            }
            this.style[property] = value;
            if ($('chkUseConsole').checked) console.log('Moo Orig: ', this.style[property]);
        }
...