让CSS转换持续时间双向工作？

我意识到CSS转换总是应用于添加的类，而不是删除的类。但我想知道是否有一个优雅的解决方案来解决我的问题。我有一组盒子，当悬停时，它们会变成一个圆圈。当按下按钮时，它们会增长/收缩

我希望它们慢慢地生长和收缩，但很快就会变成一个圆/正方形

此时，它们缓慢地增长和收缩，快速变成一个圆，但又缓慢地返回到一个正方形。这当然是因为框的CSS转换持续时间设置为慢速，因此当移除circle类时，它们会恢复到原始速度。我提出了一个有效的解决方案（这里不包括），它使用

setTimeout

添加一个“快速”类，并将其删除。这确实解决了问题，但我觉得很难看

你们有没有遇到过这个问题，并想出了更好的办法？或者这仅仅超出了CSS转换的范围

CSS:

.box{
背景：红色；
宽度：100px；
高度：100px；
利润率：10px；
-webkit转换：所有2；
}
.大{
宽度：300px；
}
.圆圈{
背景：蓝色；
边界半径：50px；
-webkit转换持续时间：.5s；
}

jQuery:

$（'.box'）。在（'mouseenter'，function（）上{
$（this.addClass（'circle'）；
})
$（'.box'）。on（'mouseleave'，function（）{
$（this.removeClass（'circle'）；
})    
$（'.makeBig'）。在（'click'，function（）上{
$（'.box'）.toggleClass（'big'）；
})

HTML:

成长！

jsFiddle:

---

这可以单独使用CSS3来完成。您只需将所有转换移动到

.box

规则，如下所示：

.box{
背景色：红色；
宽度：100px；
高度：100px；
利润率：10px；
-webkit过渡：宽度2s，边框半径.5s，背景色.5s；
}
.大{
宽度：300px；
}
.圆圈{
背景颜色：蓝色；
边界半径：50px；
}
Sófka有正确的答案，但我想补充一点，而不是这样做：

$('.box').on('mouseenter', function() {
    $(this).addClass('circle');            
})

$('.box').on('mouseleave', function() {
    $(this).removeClass('circle');            
})

您可以这样做：

$('.box').hover(function() {
    $(this).addClass('circle');
}, function () {
    $(this).removeClass('circle');
});

通过分配与已执行操作的描述相对应的类名，而不是渲染结果（
slow
vs
circle
），尝试从语义上解决这个问题，并相应地处理转换。感谢这个答案，这非常有意义！但是，如果要更改的转换属性相同，该怎么办？如本例所示：这清楚地回答了所问的问题，因此我接受了它。关于同一物业的使用，我在这里问了一个单独的问题：谢谢你的帮助！我确实知道这样做的方法，我只是更喜欢使用
on（）
方法，对我来说似乎更干净。：）