让 CSS transition-duration 双向工作？

Question

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

我希望它们缓慢地生长和收缩，但迅速变成圆形/方形。

此刻，它们慢慢地变大变小，迅速地变成圆形，又慢慢地变回正方形。这当然是因为框的 CSS 过渡持续时间设置为慢速，因此当删除圆类时，它们会恢复到原始速度。我提出了一个可行的解决方案（此处未包含），setTimeout用于暂时添加“快速”类并将其删除。它确实解决了问题，但对我来说感觉很丑陋。

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

CSS：

.box {
    background: red;
    width: 100px;
    height: 100px;
    margin: 10px;
    -webkit-transition: all 2s;
}

.big {
  width: 300px;    
}

.circle {
    background: blue;
    border-radius: 50px;
    -webkit-transition-duration: .5s;
}

jQuery：

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

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

$('.makeBig').on('click', function() {
    $('.box').toggleClass('big');            
})

HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button class="makeBig">Grow!</button>

js小提琴：

http://jsfiddle.net/VDyPG/1/

Answer 1

它可以单独使用 CSS3 来完成。您需要做的就是将所有转换移动到.box规则，如下所示：

.box {
     background-color: red;
     width: 100px;
     height: 100px;
     margin: 10px;
     -webkit-transition: width 2s, border-radius .5s, background-color .5s;
}

.big {
   width: 300px;    
}

.circle {
    background-color: blue;
    border-radius: 50px;
}