2

我意识到 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/

4

2 回答 2

5

可以单独使用 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;
}
于 2012-06-05T13:17:46.440 回答
0

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');
});
于 2012-06-05T14:19:11.210 回答