removeClass不能在CSS转换中工作

Question

我试图在点击时制作一个闪烁效果(立即设置背景，然后淡出)，但在第二次点击removeClass时没有删除它。错误在哪里?

JS:

$('div').click(function() {
    $(this).css({transition: '0s'}).addClass('qwe')
    .delay(1).queue(function() {
        $(this).css({transition: '2s'}).removeClass('qwe');
    });
});

CSS:

div{
    height: 100px;
    width: 100px;
    background: gray;
}
.qwe {
    background: green;
}

小提琴

Answer 1

构建浏览器是为了通过合并它们来优化后续的样式更改。对于CSS的过渡，他们做得有点过头了。

目前没有"干净"的方法，在当前的浏览器中，你能做的最好的是在应用会调用过渡的更改(在你的情况下是removeClass)之前，通过window.getComputedStyle(document).color或类似的方式强制重新设计样式。

看到清洁的方式，以编程方式使用CSS过渡从JS?查看更多信息。

Answer 2

使用jQuery UI解决

$('div').click(function() {
    $(this).addClass('qwe').switchClass('qwe', '', 1000);
});