Fetch el valor css de transformar directamente usando jQuery

Question

estoy recibiendo -moz-transform: translate(-283.589px, 0px) de dom haciendo element.style[vendor + 'Transform']. Ahora quiero extraer el valor -283.589px para usarlo en mi aplicación pero no obtener la forma exacta de recuperarlo. Si lo hago console.log($('.slide').css("-moz-transform")) devuelve el valor de la matriz como matrix(1, 0, 0, 1, -283.589px, 0px). ¿Hay una forma adecuada en jquery para obtener directamente el valor -283.589px? No quiero hacer ningún cálculo matricial.

Answer 1

Tengo buenas y malas noticias.

Comenzaré con la mala noticia: después de examinar el objeto que jQuery devuelve, el objeto matrix no es más que una cadena y no hay absolutamente ninguna manera de obtener otro objeto, sino una cadena. Por mucho que nos gustaría no estar de acuerdo con que no debe ser una cadena: los valores CSS son cadenas, por lo tanto, jQuery devuelve cadenas.

lo tanto, si te gusta o no, que realmente tiene que analizar la cadena con el fin de obtener el valor. La buena noticia es: tengo dos soluciones.

Ahora, si estás muy seguro de que el primer par de valores son siempre los mismos simplemente podría utilizar subcadena. Pero, siguiente problema: en Google Chrome, el valor -283.589px se cambia a -283.5889892578125.

verdad, se necesita un analizador de cadena más avanzada para obtener el valor correcto. Doy la bienvenida a la expresión regular:

var matrix = $('.selector').css('-moz-transform'); 
var values = matrix.match(/-?[\d\.]+/g); 

Esto obtiene todos los valores de su cadena.

Al seleccionar el índice derecho, puede obtener su valor:

var x = values[5]; 

Esa es la mejor solución que puedo ofrecer y estoy positivo que es la única solución posible.

Answer 2

usando var matrix = $('.selector').css('-moz-transform');,

matrix.match(/([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/); 

le daría un objeto con {0, 1, 2, índice, entrada}

[1] = x, [2] = y

Answer 3

desde que constantemente necesito usar jQuery junto con TweenMax y desde TweenMax ya se hizo cargo de todo el análisis de diversos tipos de cadenas de transformación, así como los problemas de compatibilidad, que escribió un pequeño plugin de jQuery here (más de una envoltura de GSAP de) que podrían acceder directamente a estos valores s como este:

$('#ele').transform('rotationX') // returns 0 
$('#ele').transform('x')   // returns value of translate-x 

la lista de propiedades que usted podría conseguir/set, junto con sus propiedades iniciales:

perspective: 0 
rotation: 0 
rotationX: 0 
rotationY: 0 
scaleX: 1 
scaleY: 1 
scaleZ: 1 
skewX: 0 
skewY: 0 
x: 0 
y: 0 
z: 0 
zOrigin: 0 

Answer 4

Mientras que jQuery no puede hacer esto por sí solo, un método de expresión regular sería mejor.
En el código debajo de los parseComplexStyleProperty funciones toma una cadena que es, por ejemplo, el atributo style de un elemento y lo rompe en un objeto de claves y valores:

function parseComplexStyleProperty(str){ 
 
    var regex = /(\w+)\((.+?)\)/g, 
 
     transform = {}, 
 
     match; 
 

 
    while(match = regex.exec(str)) 
 
     transform[match[1]] = match[2]; 
 
    
 
    return transform; 
 
} 
 

 
////////////////////////////////////////// 
 

 
var dummyString = $('something').attr('style'), 
 
    transformObj = parseComplexStyleProperty(dummyString); 
 

 

 
console.log(dummyString, transformObj)