CSS Animation JS

by nate

HTML

<ul>
    <li></li>
</ul>

CSS

ul {
    border: 10px solid blue;
    height: 200px;
    margin: 0 0 1em;
    position: relative;
    width: 300px;
}

li {
    background: yellow;
    height: 200px;
    left: 100px;
    position: absolute;
    top: 0;
    width: 300px;
}

JavaScript

var core = core || {};

(function() {
     
    core.defer = function( func ) {
        setTimeout( func, 0 );
    };
    
    core.animate = function( element, start, end, options ) {
        var settings = {
                delay: options.delay || '0s',
                duration: options.duration || '1s',
                timing: options.timing || 'ease'
            },
            msDuration = settings.duration.split( 's' )[0] * 1000,
            vendorPrefix = 'Webkit';
        
        console.log( msDuration );
        
        // console.log( 'settings', settings, 'options', options );
        
        // Set initial state
        for ( prop in start ) {
            element.style[prop] = start[prop];
        }
        
        core.defer(function() {
            element.style[vendorPrefix + 'Transition'] = 'all ' + settings.duration + ' ' + settings.timing;
            
            for ( prop in end ) {
                // console.log( 'end!', end[prop], prop );
                element.style[prop] = end[prop];
            }
            
            // setTimeout( (function() { element.style[vendorPrefix + 'Transition'] = ''; }), msDuration );
        });
    };
    
})();

// A demo
var ele = document.getElementsByTagName( 'li' )[0];

core.animate( ele, {
        left: '300px',
        top: '0px'
    }, {
        left: '200px',
        top: '100px'
    }, {
        delay: '1s',
        duration: '0.5s',
        timing: 'ease'
    });