javascript - 绕过转换并立即更改属性

Question

我想绕过 CSS 转换并立即更改属性。
我尝试在更改之前将 transition-duration 设置为 0s，然后将 transition-duration 设置回其原始值:

$('div').css('width', '200px').delay(1000).queue(function() {
    $(this).css({
        transitionDuration: '0s',
        msTransitionDuration: '0s',
        mozTransitionDuration: '0s',
        webkitTransitionDuration: '0s',
        oTransitionDuration:'0s'
    }).css('width', '10px').css({
        transitionDuration: '2s',
        msTransitionDuration: '2s',
        mozTransitionDuration: '2s',
        webkitTransitionDuration: '2s',
        oTransitionDuration:'2s'
    })
})​

Fiddle
这显然行不通。

据我了解 spec没有为此定义该行为:

Since this specification does not define when computed values change, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.

有没有简单的方法来做到这一点？

注意:我要更改的属性是transform，因此.animate() 不是一个选项。

Answer 1

由于没有其他人发布有效答案，因此:

$('div').css('width', '200px').delay(1000).queue(function() {
    $(this).css({transition: '0s', width: '10px'}).delay(1).queue(function() {
        $(this).css({transition:'2s'});
    });
},1000)​;

FIDDLE

或者如果是另一种方式:

$('div').css({
    transition: '0s'
  }).css('width', '200px').delay(1000).queue(function() {
      $(this).css({width: '10px', transition: '2s'});
});

FIDDLE

现在 jQuery 应该标准化 vendor 前缀，因此您不必自己键入它们。

---

这里的问题是 jQuery 一次附加所有样式，只保留最后的样式，覆盖相同 CSS 属性的先前样式而不重绘 DOM，并且使用 native javascript 进行测试似乎正在做同样的事情，所以它可能是浏览器试图通过添加样式来避免不必要的回流，只是为了在下一行代码中更改它，所以这样做:

$('div').css({
    transition: '0s',
    width: 200
}).css({
    transition: '3s',
    width: 10
});

将不起作用，因为只添加了最后一个样式。

这就是 delay() 发挥作用的地方，OP 的问题已经在使用 delay() 所以没有理由不使用它，但是删除 delay() 当然会导致上述问题，浏览器不会绘制第一个样式，而只会绘制最后一个样式等。

由于 delay() 实际上只是一个花哨的超时，它有效地推迟了样式的第二次设置的执行，导致两次浏览器重绘。

由于这很可能是浏览器问题，而且我们无法更改，因此延迟第二种样式的设置是使它起作用的唯一方法，即使设置为仅 1 毫秒，使用延迟仍然有效，或者可以使用常规超时延迟执行，这是延迟执行脚本的常用方法:

$('div').css({
    transition: '0s',
    width: 200
});

setTimeout(function() {
    $('div').css({
        transition: '3s',
        width: 10
    });
});

FIDDLE

上面的代码会工作得很好，因为超时会导致浏览器绘制样式的第一个设置，并将超时内的样式设置推迟到以后的时间，但由于没有设置时间，所以浏览器会尽快执行(但仍会延迟到当前脚本完成后)，这对于人眼来说似乎是立即执行的，这解决了问题。