jQuery CSS3 Transitions

by Florian Bar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<a href="#">Hover over me</a>

JavaScript

String.prototype.camelToHyphen = function () {
	return this.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};


/* CSS3 transition polyfill 
   =========================================== */

$.fn._animate = function (styles, duration, callback) {
    var $element = this;
    duration = duration || 200; // default duration

    // Get properties that need to transition

    var properties = [];
    for (var prop in styles) {
        properties.push( prop.camelToHyphen() );
    }
    var transitionProps = properties.join(', ');

    // Use css transitions if supported
    // otherwise use jQuery

    if (Modernizr.csstransitions) {

        var transitionStyles = {
            'transition-property': transitionProps, // eg. 'width, left, color'
            'transition-duration': duration + 'ms',
            'transition-timing-function': 'ease'
        };
        $element.css($.extend({}, styles, transitionStyles));

        setTimeout(function () {
            // $element.css({ 'transition': 'none' }); // reset transition
            if (callback) { callback(); }
        }, duration);
    }
    else {
        $element.animate(styles, duration, callback);
    }
};

$.fn._slideDown = function (duration) {
    var $this = $(this);
    duration = getDurationWithUnit(duration);

    // Use css transition if supported
    // otherwise use jQuery to animate
    if (Modernizr.csstransitions) {

        // To prevent height issues with the padding a wrapper div is used
        $this.wrap('<div class="height-wrapper"></div>');
        var $wrapper = $this.closest('.height-wrapper');

        $this.show();
        var height = $wrapper.height();

        // Prepare element for css3 transition
        $wrapper.addClass('transition-all');
        $wrapper.css({
            height: '0px',
            overflow: 'hidden',
            transitionDuration: duration
        });

        // Set transition height 
        $wrapper.height(height + 'px');

        // Reset element 
  ...