如果过渡中断，则完成 CSS 更改答案

【问题标题】：Completing CSS changes if transition is interrupted如果过渡中断，则完成 CSS 更改
【发布时间】：2015-04-09 13:18:56
【问题描述】：

http://a.pomf.se/hjhsav.webm

我正在制作一个菜单，其中箭头键向左或向右移动整个 UI。

Javascript：

$('.xmb').css('left','+=175px')

CSS：

.xmb{
position: relative;
top: 240px;
left: 310px;
transition: left .2s;}

问题是，如果我敲击箭头键或按住一个键，转换在完成之前再次触发，并被中断。随后它无法移动 175px（按箭头键）并且菜单变得不合适。我尝试使用 jQuery 动画，但结果更糟（动画不间断，因此落后于菜单应该在的位置。我可以交替敲击箭头键，然后松开，菜单会左右移动一些秒长。由于某些奇怪的原因，它也没有像 CSS 过渡一样移动菜单。）

有没有一种简单的方法可以让过渡在被中断的情况下跳转到它的最终位置？如果我在不到 0.2 秒的时间内按了 3 次左箭头键，我希望它移动 3*175 像素。

谢谢

【问题讨论】：

标签： javascript jquery css jquery-animate transition

【解决方案1】：

如果你只有一步，你可以检查left是否为0，然后移动它。

$('button').click(function(e){
    e.preventDefault();
    if($('.xmb').css('left')=="0px"){
        $('.xmb').css('left','+=175px');
    }
})

如果您有多个步骤，则可以使用模运算符，并且仅当结果为 0 时才移动

Modulus operator

$('button').click(function(e){
    e.preventDefault();
    if(parseInt($('.xmb').css('left')) % 175==0){
        $('.xmb').css('left','+=175px');
    }
})

如果您需要在第二次单击或按键时删除过渡，则必须为过渡创建一个单独的类，并在需要时添加/删除。 JSfiddle

【讨论】：

那只会在它完成转换的情况下移动它，对吧？我希望它在按箭头键时变得活泼。如果我向左然后再次向左（在 0.2 秒内），我希望它跳过第一个过渡的其余部分（并完成 175px 的移动）并立即开始下一个过渡。
试试这个小提琴并用你的代码测试它。它不是最好的解决方案，但我认为它有效。 jsfiddle.net/qd668a10/1我之前也纠正了代码中的一些错误
等等，不。现在它以不同的方式被破坏了。如果我左右敲击，它可能会偏移 175 像素（大约），就好像它完全跳过了一个按键一样。