javascript - CSS 转换未在所有浏览器中使用 jQuery 更新

Question

我正在尝试翻译 html 范围输入 slider 的 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);
},

非常感谢任何帮助。

编辑: fiddle

看到它在这里做同样的事情: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