removeClass is not working w/CSS transitions

Question

I'm trying to make a blink effect on click (instantly set background and then fade out) but on second click removeClass is not removing it. Where is a mistake?

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

Answer 1

The browsers are built to optimize consequent style changes by coalescing them. In case of CSS transitions they do it a bit over-zealously.

Currently there's no 'clean' way around it, the best you can do in current browsers is force restyle via window.getComputedStyle(document).color or similar before the applying the changes that would invoke transition (removeClass in your case).

See Clean way to programmatically use CSS transitions from JS? for more information.

Answer 2

Solved it using jQuery UI

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