绕过转换并立即更改属性 [英] Bypassing transition and changing a property instantly

问题描述

我想绕过CSS转换并立即更改属性。

我试图将 transition-duration 设置为 0s 在更改之前，然后将 transition-duration 恢复为原始值：

I want to bypass CSS transition and change a property instantly.
I tried to set transition-duration to 0s before the change and then set transition-duration back to its original value:

$('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
This obviously doesn't work.

我理解规范没有为此定义该行为：

I understand that the spec does not define that behavior for this:

由于此规范未定义计算值何时更改，因此
因此更改为计算值被认为是同时的，
作者应该知道，在进行可能转换的更改后，更改任何转换属性
a可能会导致行为因实现而异，因为
更改可能在某些实现中被视为同时发生，但
不是其他实现。

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.

有没有简单的方法这样做？

Is there an easy way to do this?

注意：我要更改的属性是 transform 所以 .animate（）不会是一个选项。

Note: The property I am changing is transform so .animate() would not be an option.

推荐答案

因为没有其他人是发布有效答案，请点击：

Since nobody else is posting a valid answer, here goes:

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

FIDDLE

或者如果是另一种方式：

Or if it's the other way:

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

FIDDLE

jQuery现在应该规范供应商前缀，因此您不必自己键入它们。

jQuery should normalize vendor prefixes these days, so you don't have to type them all yourself.

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

The issue here is that jQuery attaches all the styles at once, only keeping the last styles, overwriting the previous styles of the same CSS property without ever doing a repaint of the DOM, and testing with native javascript seems to be doing the same thing, so it's probably the browser trying to avoid uneccessary reflows by adding a style just to have it changed in the next line of code, so doing:

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

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

won't work as only the last style is added.

这是 delay（）发挥作用的地方，OP的问题已经在使用 delay（）所以没有理由不使用它，但删除 delay（）当然会导致上述问题，浏览器没有不要画第一种风格，但只画最后一种风格。

This is where delay() comes into play, the OP's question was already using delay() so there was no reason not to use it, but removing delay() will of course cause the above issue, where the browser doesn't paint the first style, but only the last etc.

作为延迟（）真的只是一种幻想超时，它实际上推迟了第二个样式设置的执行，导致两个浏览器重新绘制。

As delay() is really just a fancy timeout, it effectively defers the execution of the second setting of the styles, causing two browser repaints.

因为这很可能是一个浏览器问题，而不是我们可以改变的东西，推迟第二种风格的设置是使这项工作的唯一方法，使用延迟仍然可以工作，即使它设置为只有1毫秒，或者可以推迟执行常规超时，这是通常的方式推迟执行脚本：

As this is most likely a browser issue, and not something we can change, deferring the setting of the second style is the only way to make this work, and using a delay will still work even if it's set to just 1 milliseconds, or one could defer the execution with a regular timeout, which is the usual way to defer execution of a script:

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

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

FIDDLE

上面的工作正常，因为超时会导致浏览器首次设置样式，并且将超时内的样式设置延迟到以后的时间，但是由于没有设置时间，所以一旦浏览器可以执行（但仍然推迟到当前脚本完成之后），这对于人眼来说似乎是马上，这就解决了这个问题。

The above will work just fine, as the timeout causes the first setting of the style to be painted by the browser, and defers the setting of the style inside the timeout to a later time, but as no time is set, it's executed as soon as the browser can (but still deferred until after the current script has completed), which for the human eye would seem like immediately, and that solves the issue.

这篇关于绕过转换并立即更改属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！