web-dev-qa-db-fra.com

Transitions CSS3 dans jQuery .css ()

Lorsque j'ajoute la ligne de transition dans mon code, cela casse jQuery. Comment puis-je le réparer?

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

J'essaie de créer un fondu d'une div à l'autre à l'intérieur d'un curseur

jquerycss-transitions
24
Scott B

Étape 1) Supprimez le point-virgule, c'est un objet que vous créez ...

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

à

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

Étape 2) Préfixes du fournisseur ... aucun navigateur n'utilise transition car c'est la norme et c'est une fonctionnalité expérimentale même dans la dernière version navigateurs:

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

Voici une démo: http://jsfiddle.net/83FsJ/

Étape 3) De meilleurs préfixes fournisseurs ... Au lieu d'ajouter des tonnes de CSS inutiles aux éléments (qui seront simplement ignorés par le navigateur), vous pouvez utiliser jQuery pour décider quel préfixe de fournisseur utiliser:

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

Voici une démo: http://jsfiddle.net/83FsJ/1/

Notez également que si vous spécifiez dans votre déclaration transition que la propriété à animer est opacity, la définition d'une propriété left ne sera pas animée.

40
Jasper

Votre code peut devenir rapidement désordonné lorsqu'il s'agit de transitions CSS3. Je recommanderais d'utiliser un plugin tel que jQuery Transit qui gère la complexité des animations/transitions CSS3.

De plus, le plugin utilise webkit-transform plutôt que webkit-transition, ce qui permet aux appareils mobiles d'utiliser l'accélération matérielle afin de donner à vos applications Web un aspect et une convivialité natifs lorsque les animations se produisent.

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

});

La plupart du travail acharné pour obtenir la compatibilité entre les navigateurs est également fait pour vous et cela fonctionne comme un charme sur les appareils mobiles.

6
ROFLwTIME