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 に答える