jQuery Transform & Transition Shortcuts

jQuery.tt.js

/**
 * jQuery Transform & Transition Shortcuts
 * 
 * 从Framework7中的DOM7剥离重构一些有用的片段
 */
 
;(function(){
    
    // 变换
    $.fn.transform = function(transform){
  
        for (var i = 0; i < this.length; i++) {
   
            var eleStyle = this[i].style;
            eleStyle.webkitTransform = eleStyle.MsTransform
                                = eleStyle.MozTransform
                                = eleStyle.OTransform
                                = eleStyle.transform
                                = transform;
        }
  
        return this;
    };
 
    // 过渡
    $.fn.transition = function(duration){
        if (typeof duration !== 'string') {
            duration = duration + 'ms';
        }
  
        for (var i = 0; i < this.length; i++) {
            var eleStyle = this[i].style;
   
            eleStyle.webkitTransitionDuration = eleStyle.MsTransitionDuration
                                             = eleStyle.MozTransitionDuration
                                             = eleStyle.OTransitionDuration
                                             = eleStyle.transitionDuration
                                             = duration;
        }
  
        return this;
    };
    
    // 监听变化完成
    $.fn.transitionEnd = function (callback) {
        var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'],
            i, j, dom = this;
        if (callback) {
            for (i = 0; i < events.length; i++) {
                dom.on(events[i], _fireCallBack);
            }
        }
        return this;
    };
    
    // 监听动画完成
    $.fn.animationEnd = function (callback) {
        var events = ['webkitAnimationEnd', 'OAnimationEnd', 'MSAnimationEnd', 'animationend'],
            i, j, dom = this;
        
        if (callback) {
            for (i = 0; i < events.length; i++) {
                dom.on(events[i], _fireCallBack);
            }
        }
        return this;
    },
    
    // 获取转换值
    $.fn.getTranslate = function (axis) {
        
        if( this.length = 0 ){
            return null;
        }
        
        // jQuery对象为DOM数组，只取第一个元素
        var el = this[0];
        
        var matrix, curTransform, curStyle, transformMatrix;
    
        // automatic axis detection
        if (typeof axis === 'undefined') {
            axis = 'x';
        }
    
        curStyle = window.getComputedStyle(el, null);
        if (window.WebKitCSSMatrix) {
            // Some old versions of Webkit choke when 'none' is passed; pass
            // empty string instead in this case
            transformMatrix = new WebKitCSSMatrix(curStyle.webkitTransform === 'none' ? '' : curStyle.webkitTransform);
        }
        else {
            transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform  || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,');
            matrix = transformMatrix.toString().split(',');
        }
    
        if (axis === 'x') {
            //Latest Chrome and webkits Fix
            if (window.WebKitCSSMatrix)
                curTransform = transformMatrix.m41;
            //Crazy IE10 Matrix
            else if (matrix.length === 16)
                curTransform = parseFloat(matrix[12]);
            //Normal Browsers
            else
                curTransform = parseFloat(matrix[4]);
        }
        if (axis === 'y') {
            //Latest Chrome and webkits Fix
            if (window.WebKitCSSMatrix)
                curTransform = transformMatrix.m42;
            //Crazy IE10 Matrix
            else if (matrix.length === 16)
                curTransform = parseFloat(matrix[13]);
            //Normal Browsers
            else
                curTransform = parseFloat(matrix[5]);
        }
        
        return curTransform || 0;
    };
    
    // 触发回调
    function _fireCallBack(e) {
        callback(e);
        for (i = 0; i < events.length; i++) {
            dom.off(events[i], _fireCallBack);
        }
    } 
})();