無法在Firefox中使用jquery獲取CSS轉換屬性

Question

我試圖讀出元素的轉換屬性，但是，我只收到一個空字符串。我可以看到它的元素有一個過渡。

我使用jQuery的.css()來實現這一點。例如，下面的代碼

// in css 
#transitionElement { 
    transition: height 0.5s ease; 
} 

// and in JS 
$('#transitionElement').height('59px'); 
console.log($('#transitionElement').css('transition')); 
console.log($('#transitionElement').css('-moz-transition')); 

觸發的過渡，我可以看到它，但日誌2X (empty string)。

在Chromium .css('transition')工作得很好。

任何想法如何使這項工作在Firefox？

編輯：

看來你無法讀出整個過渡爲字符串在Firefox（由jimmyweb指出）。用cssHook來幫助自己。不知道其他瀏覽器，也許我可以測試一下。

if($.browser.mozilla) { 
    $.cssHooks[ "transition" ] = { 
     get: function(elem, computed, extra) { 
      return $.css(elem, 'transition-duration') 
       + ' ' + $.css(elem, 'transition-property') 
       + ' ' + $.css(elem, 'transition-timing-function'); 
     } 
    }; 
} 

Answer 1

其實這是奇怪的是transition屬性爲空，但transition由其他屬性都可以訪問，這樣你就可以連接整個transition值。您也可以使用getComputedStyle方法獲取CSS屬性值。您的控制檯應該打印出每個屬性除第一個和延遲值（如果你不提供的話），這是空字符串：

var element = document.getElementById('transitionElement'), 
    style = window.getComputedStyle(element); 
    console.log(style.getPropertyValue('transition')); 
    console.log(style.getPropertyValue('transition-delay')); 
    console.log(style.getPropertyValue('transition-duration')); 
    console.log(style.getPropertyValue('transition-property')); 
    console.log(style.getPropertyValue('transition-timing-function')); 

永遠記住也爲舊版本提供供應商前綴：

#transitionElement { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

Answer 2

問題並不僅僅侷限於火狐< = 23，但也發生在Safari < 7的iOS < 7和IE < = 11，所以我創建一個更通用的解決方案，還支持遷移延遲和多個由逗號分隔的聲明如：

transition: transform 1500ms cubic-bezier(0,0.6,1) 1s, left 500ms; 

這裏是我的jQuery插件和輔助功能：

/** 
* PROBLEM: FF<=23, IE<=11 and Safari<7 return empty strings on 
* $elm.css('-prefix-transition'). 
* SOLUTION: Retrieve transition properties separately and compose full version. 
* 
* See answer at http://stackoverflow.com/a/21139827/328272. 
*/ 
jQuery.fn.getTransitionStyle = function(transitionPrefixed) { 
    var $elm = this; 

    if ($elm.css(transitionPrefixed)) return $elm.css(transitionPrefixed); 

    // Transition properties to iterate through. 
    var properties = 'property duration timing-function delay'.split(' '), 
    result = [], valueArray, i, j; 

    // Iterate through transition properties. 
    for (i = 0; i < properties.length; i++) { 
    // Get property value and split by comma. 
    valueArray = $.css($elm[0], transitionPrefixed + '-' + properties[i]).splitCssStyleByComma(); 

    // Iterate through 
    for (j = 0; j < valueArray.length; j++) { 
     // Add value to return array. 
     result[j] = (result[j] ? result[j] + ' ' : '') + valueArray[j]; 
    } 
    } 
alert(result.join(', ')); 
    return result.join(', '); 
}; 

/** 
* Split CSS style by commas while ignoring commas between parenthesis. 
* Example: 
* Input string: "transform 1500ms cubic-bezier(0,0.6,1), left 500ms" 
* Output array: ["transform 1500ms cubic-bezier(0,0.6,1)", "left 500ms"] 
*/ 
(function() { 
    var regExpString = '\\s*(' + '([^,(]+(\\(.+?\\))?)+' + ')[\\s,]*', 
    regExpMain = new RegExp(regExpString), 
    regExpValidate = new RegExp('^(' + regExpString + ')+$'), 
    string, result; 

    String.prototype.splitCssStyleByComma = function() { 
    string = this, result = []; 

    // DEBUG: Validate value to prevent an infinite loop. 
    if (!string.match(regExpValidate)) { 
     console.log('ERROR: Cannot split CSS style by comma: "' + string + '"'); 
     return false; 
    } 

    // As long as there is a string left, chop off the parts we desire. 
    while (string.match(regExpMain)) { 
     // Add value to return array. 
     result.push(RegExp.$1); 

     // Remove value from string. 
     string = string.replace(regExpMain, ''); 
    } 

    return result; 
    }; 
})(); 

使用插件以下列方式。我用Modernizr.prefixed()找到過渡樣式名稱的前綴可選版本，但是任何其他方法ofcourse做：

var transitionNamePrefixed = Modernizr.prefixed('transition'); 
var transitionStyle = $('.element').getTransitionStyle(transitionNamePrefixed);