绕过转换并立即更改属性

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'
    })
})?

小提琴
这显然不起作用.

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

由于此规范未定义计算值何时更改,因此计算值的哪些更改被同时考虑,因此作者应注意在进行可能转换的更改后,在少量时间内更改任何转换属性可能会导致在实现之间变化,因为在一些实现中可以同时考虑改变而不是其他实现.

是否有捷径可寻？

注:我改变的属性是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)?;

小提琴

或者如果是另一种方式:

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

小提琴

jQuery应该规范化供应商前缀这些天,所以你不必自己键入它们.

这里的问题是jQuery一次性附加所有样式,只保留最后的样式,覆盖相同CSS属性的先前样式而不用重新绘制DOM,并且使用原生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
    });
});

小提琴

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

Answer 2

如果你可以控制CSS

最简单的方法是将动画绑定到某个类，然后在您希望动画不再被绕过的时候添加该类，否则不会设置任何动画。如果相反，您通常需要动画，但偶尔想要绕过它，则默认添加该类并在绕过时将其删除。

CSS 示例

div{
    height: 100px;
    width: 200px;
    background: red;
}
div.doTransition {
    width: 10px;
    transition: width 2s linear;
    -ms-transition: width 2s linear;
    -moz-transition: width 2s linear;
    -webkit-transition: width 2s linear;
    -o-transition: width 2s linear;
}

请参阅小提琴，它创建一个单击事件以在需要时启动动画，但这可能是其他一些编程触发器，用于在不再希望绕过它时添加该类。这个小提琴做了相反的事情，它假设动画存在，但在页面加载时立即通过删除类来绕过它。

Answer 3

设置一个覆盖类来禁用所应用元素上的 css 转换，!important非常适合此目的：

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

您现在可以toggleClass切换所需的行为（平滑过渡与即时更改）：

$('div').
toggleClass('notransition', true). //or false!
css('width', '200px');

拨弄了。IMO 这种方法的优点之一是，默认元素样式和禁用所有平滑动画标志之间有明确的分离。这也是一种非常“可包装”的可重用方法，即您可以轻松地将可选的布尔属性添加到现有方法中，以指示是否应该通过转换来执行它。

注意：有时您可能出于任何性能/用户体验原因想要完全禁用页面上的转换。在这种情况下，您可以将选择器更改为.notransition *并禁用所有后代元素的转换。