web-dev-qa-db-ja.com

jQuery .css（）内のCSS3遷移

コードに遷移行を追加すると、jQueryが壊れます。どうすれば修正できますか？

a(this).next().css({
    left: c,
    transition: 'opacity 1s ease-in-out'
});

スライダー内で1つのdivから次のdivへのフェードを設定しようとしています

jquerycss-transitions
24
Scott B

ステップ1）セミコロンを削除します。これは作成中のオブジェクトです...

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out';
});

に

a(this).next().css({
    left       : c,
    transition : 'opacity 1s ease-in-out'
});

ステップ2）ベンダープレフィックス...ブラウザーはtransitionを使用します。これは標準であり、これは最新の実験機能ですブラウザ：

a(this).next().css({
    left             : c,
    WebkitTransition : 'opacity 1s ease-in-out',
    MozTransition    : 'opacity 1s ease-in-out',
    MsTransition     : 'opacity 1s ease-in-out',
    OTransition      : 'opacity 1s ease-in-out',
    transition       : 'opacity 1s ease-in-out'
});

デモは次のとおりです。 http://jsfiddle.net/83FsJ/

ステップ3）より良いベンダープレフィックス...要素に大量の不要なCSSを追加する代わりに（ブラウザによって無視されるだけです）使用するベンダープレフィックスを決定するjQuery：

$('a').on('click', function () {
    var myTransition = ($.browser.webkit)  ? '-webkit-transition' :
                       ($.browser.mozilla) ? '-moz-transition' : 
                       ($.browser.msie)    ? '-ms-transition' :
                       ($.browser.opera)   ? '-o-transition' : 'transition',
        myCSSObj     = { opacity : 1 };

    myCSSObj[myTransition] = 'opacity 1s ease-in-out';
    $(this).next().css(myCSSObj);
});​

デモは次のとおりです。 http://jsfiddle.net/83FsJ/1/

transition宣言で、アニメーション化するプロパティがopacityであることを指定した場合、leftプロパティを設定してもアニメーション化されないことに注意してください。

40
Jasper

CSS3トランジションを処理するときに、コードが乱雑に速くなる可能性があります。 CSS3アニメーション/トランジションの複雑さを処理する jQuery Transit などのプラグインを使用することをお勧めします。

さらに、プラグインはwebkit-transitionではなくwebkit-transformを使用します。これにより、モバイルデバイスがハードウェアアクセラレーションを使用して、アニメーションが発生したときにネイティブなルックアンドフィールをWebアプリに提供できます。

JS Fiddle Live Demo

Javascript：

$("#startTransition").on("click", function()
{

    if( $(".boxOne").is(":visible")) 
    {
        $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
        $(".boxTwo").css({ x: '100%' });
        $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
        return;        
    }

    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
    $(".boxOne").css({ x: '100%' });
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 });

});

ブラウザ間の互換性を確保するための大変な作業のほとんどはあなたのためにも行われ、それはモバイルデバイスの魅力のように機能します。

6
ROFLwTIME