使用 jQuery 检测跨浏览器的 CSS 转换变化答案

【问题标题】：Detect CSS transform change across browsers using jQuery使用 jQuery 检测跨浏览器的 CSS 转换变化
【发布时间】：2011-12-21 00:14:04
【问题描述】：

我需要使用 jQuery 检测 CSS 转换属性是否已更改。在 firebug 中，我希望检测更改的 CSS 属性呈现如下：

-moz-transform: translate(-0px, 0px)

我需要检测这是否已更改为另一个像素属性。例如：

-moz-transform: translate(-100px, 0px)

更多细节：

最终我试图在下面的演示中检测点击和拖动之间的关系。

http://cubiq.org/dropbox/iscroll4/examples/carousel/

我想我可以在当前的变换属性上查询mouseup，如果它保持不变，那就是点击，或者如果变换属性发生变化，那就是拖动。

【问题讨论】：

用户可以通过拖动一个大溢出的容器来改变它。
听起来你可能有更大的问题。除非这实际上是您需要做的所有事情，否则解释您正在做什么以及为什么需要这样做对您有利 - 您的解决方案可能不是唯一的，或者可能工作量太大，或者不是正确的那一个。编辑：你不能在用户拖动容器后使用回调吗？
添加了有关该问题的更多详细信息。如果有更简单的方法来实现最终目标，请告诉我。

标签： jquery css transform

【解决方案1】：

您可以使用 Modernizr 创建供应商前缀，然后您可以使用 .split() 将输出与 .css() 分开并获得所需的值。

这是获取正确前缀属性的方法：

if (Modernizr.csstransforms3d) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

} else if (Modernizr.csstransforms) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}

来源：http://www.modernizr.com/docs/#prefixed

那么你可以使用.css()来获取-vender-transform属性：

var matrix = $('#element-id').css(trans_key);//output = matrix(1, 0, 0, 1, 100px, 0px)

那么最后你可以将.split() 的matrix 值变成可用的东西：

var data = matrix.replace(')', '').split(',');//data[4]='100px', data[5]='0px'

这是一个演示：http://jsfiddle.net/7Yz8B/

【讨论】：