3

CSS トランジションを使用して、さまざまなプロパティにさまざまな期間を設定できることを知っています。しかし、同じプロパティに異なる期間を設定することは可能ですか?

例:ホバー/マウスを終了するとボックスの幅が長さ Aに急速に拡大/縮小し、ボタンが押されると幅が長さ Bにゆっくり拡大/縮小するように、別のクラスを使用します。

次に例を示します。

http://jsfiddle.net/VDyPG/7/

現時点では、ボックスはホバリング時にのみ急速に拡大し、マウスを離すとゆっくりと縮小します。もちろん、この.boxクラスには遅い持続速度が適用されているため、これは予想されますが、これを回避する方法はありますか? 私はそれを行うハックな方法とsetTimeout余分な「高速」クラスを考え出しましたが、もっとエレガントな方法があれば素敵です。

注:これは jQuery で簡単に実行できることを認識しています。ただし、この孤立した例の外で直面している実際の問題は 3D 変換にあるため、CSS で動作することを本当に探しています。例のために単純に保ちます。:)

CSS:

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

.lengthA
{   
   width: 300px; 
   -webkit-transition-duration: 0.2s; /* Can this be used when class removed? */
}

.lengthB {
     width: 500px;    
}

jQuery:

$('.box').on('mouseenter', function() {

    $(this).addClass('lengthA');            

})

$('.box').on('mouseleave', function() {

    $(this).removeClass('lengthA');            

})    

$('.makeBig').on('click', function() {

    $('.box').toggleClass('lengthB');            

})

<strong>HTML:

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

2 に答える 2

2

この手法の変形を使用することでできると思います: http://css-tricks.com/different-transitions-for-hover-on-hover-off/。私は今、iPad を使用しているので、例を挙げませんが、要点は、ホバー疑似セレクターで別のトランジションを設定することです。

jquery を使用する場合は、遷移したイベントにバインドして、前の遷移がいつ終了したかを調べることができます。命名が一貫していないことに注意してください。

次のようなものを使用する必要があります。

$("div").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionEnd transitionend", function(){
  //code
});

Firefox は、正しい transitionEnd ではなく、transitionend を使用しているようです。

于 2012-06-05T21:08:16.330 に答える
0

このような意味ですか?:

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

<style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: red;
        -webkit-transition: width 250ms ease;
    }
    .box:hover {
        width: 500px;
    }
    .box.slow {
        width: 500px;
        -webkit-transition-duration: 2s;
    }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $(".makeBig").on("click", function() {
        $('.box').addClass("slow");
    })
</script>
于 2012-06-08T08:15:40.907 に答える