removeClass 不适用于/CSS 过渡答案

【问题标题】：removeClass is not working w/CSS transitionsremoveClass 不适用于/CSS 过渡
【发布时间】：2015-11-01 18:03:37
【问题描述】：

我试图在单击时产生闪烁效果（立即设置背景，然后淡出），但在第二次单击时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;
}

Fiddle

【问题讨论】：

修复了错误的小提琴链接

标签： javascript jquery css css-transitions

【解决方案1】：

浏览器旨在通过合并它们来优化随之而来的样式更改。在 CSS 过渡的情况下，他们做得有点过分了。

目前没有“干净”的解决方法，在当前浏览器中您可以做的最好的事情是在应用会调用转换的更改之前通过window.getComputedStyle(document).color 或类似方法强制重新设置样式（在您的情况下为removeClass）。

看 Clean way to programmatically use CSS transitions from JS? 了解更多信息。

【讨论】：

【解决方案2】：

使用 jQuery UI 解决了这个问题

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

【讨论】：