JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<script src="https://raw.github.com/jquery/jquery-color/master/jquery.color.js"></script>
<input type="number" data-tween-from="0" data-tween-to="10" data-tween-toclass="important" data-tween-props="background-color" value="5" />

CSS

body {
    padding: 50px;
}

input {
    border: none;
    padding: 10px;
    width: 20px;
}

input.important {
    background-color: red;
    color: white;
    width: 100px;
}

JavaScript

var tweenByValue = function(e, o) {
    
    var options = {
        eventNS : ".tweenbyvalue",
        fromAttr : "data-tween-from",
        toAttr : "data-tween-to",
        toClassAttr : "data-tween-toclass",
        tweenPropsAttr : "data-tween-props",
        valueAttr : "value"
    };
    
    var element = null;
    var fromValue = 0;
    var toValue = 1;
    var toClass = "";
    
    var fromStyles = {};
    var toStyles = {};
    var propDiff = {};
    var value = 0;
    
    var methods = {
        initialize : function(el, opt) {
            $.extend(true, options, opt);
    
            element = $(el);
    
            methods._getSettings();
            propDiff = methods._getStyleDifference();
            
            methods.setValue(5);
        },
        
        _getSettings : function() {
            fromValue = parseFloat(element.attr(options.fromAttr));
            toValue = parseFloat(element.attr(options.toAttr));
            toClass = element.attr(options.toClassAttr);
            tweenProps = [];
            var a = element.attr(options.tweenPropsAttr).split(",");
            $.each(a, function(key, value) {
                tweenProps.push($.trim(value));
            });
        },
                
        _getStyleDifference : function() {
            
            fromStyles = methods._getStyles(element, tweenProps);
            toStyles = methods._getStyles(element, tweenProps, toClass);
console.debug(toStyles);
            var diff = {};
            $.each(fromStyles, function(prop, value) {
                diff[prop] = { from : value, to : toStyles[prop] };
            });

            return diff;
        },
            
        _getStyles : function(element, props, toClass) {
            element.addClass(toClass);

            var styles = {};
            $.each(props, function(index, prop) {
                styles[prop] = element.css(prop);
            });

            element.removeClass(toClass);
            return styles;
    ...