CSS转换不是在所有浏览器中使用jQuery更新

Question

我正在尝试翻译html范围输入滑块的input事件上的元素。但是当我检查元素时，jQuery创建的内联样式不会更新，而只会更新。我已经应用了一些虚拟样式，以确保css正在更新，它们是。其他所有内容都按预期更新。

如果项目尚未转换， 几乎一次。但是在应用CSS转换后，它不会更新。我已经在Safari，Chrome和Firefox中测试过相同的结果。

以下是方法：

useInputValues : function(){
    $('input[id$="-x"]').on('input', function(e){
        var id = $(this).parents('li').attr('data-item-id'),
            item = $('.grid [data-item-id="' + id + '"]'),
            x = $(this).val(),
            y = $(item).css('transform').split(',')[5] || 0,
            trans = 'translate(' + x + 'px, ' + y + 'px)';
            console.log(x + ", " + y); // this shows the values are correct and updating properly       

        // translate the element. Why doesn't this update each time?
        $(item).css('transform', trans); 

        // update the position attribute
        $(item).attr('data-x', x); // this happily updates in real time as expected
    })
},

进一步的上下文：不使用jQuery

我正在使用interact.js脚本，以便可以拖动项目以获得相同的效果。它使用的函数与我的非常相似，但它正确更新（没有jQuery）。

resizeMove : function(event){
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    // Notice here: same general idea, but it's working
    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    this.updateInputValues(target);
},

非常感谢任何帮助。

编辑：小提琴

在这里看到它做同样的事情：https://jsfiddle.net/d5kdmp0v/1/

Answer 1

获取transform样式的值将返回如下所示的矩阵：

matrix(1, 0, 0, 1, 0, 0)

因为您在逗号上拆分此字符串，所以在结果的第6个元素的字符串中仍然有一个括号，因此字符串为0)。那是一个无效的CSS值。

如果在进行拆分之前移除该支架，则可以得到您期望的结果：

y = $(item).css('transform').replace(')', '').split(',')[5] || 0

JSFiddle