Hacker News new | ask | show | jobs
by richkuo 4746 days ago
'scale, skew and rotate the sh out of any element'

win
1 comments
fein 4746 days ago
If you want to go ape with transitions, I use this little guy for extending JQ and adding a '.animate()' like function for any selector:

    var defaults = {
        duration: 700,
        easing: 'ease-out'
    };
    
    $.fn.transition = function(props, opts){
        options = $.extend({}, defaults, opts);
        props['-webkit-transition'] = 'all '
            + options.duration
            + 'ms '
            + options.easing;
        props['-moz-transition'] = 'all '
            + options.duration
            + 'ms '
            + options.easing;
        props['transition'] = 'all '
            + options.duration
            + 'ms '
            + options.easing;
        $(this).css(props);
    };
Should work for FF, webkit, IE10.

Usage would be $('selector').transition({left: '10%'});

I really need to extend it for auto prefixing transforms as well.

edit: if you like, I also wrote a little js plugin for injecting animation keyframes into the CSSOM so you can create keyframe animation rules in JS. Not sure if it has any use, or if the code is even good enough for ridicule, but if you think it's something you'd like, I can release it on github.

link