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>

的jsfiddle：

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;
}

Answer 2

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');
});

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

2 个答案: