Transiciones CSS3 dentro de jQuery .css()

Este dilema se puede resolver de variadas maneras, pero te enseñamos la resolución más completa en nuestra opinión.

Solución:

Paso 1) Elimina el punto y coma, es un objeto que estás creando…

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

para

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

Paso 2) Prefijos de proveedores… no se utilizan navegadores transition ya que es el estándar y esta es una característica experimental incluso en los navegadores más recientes:

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

Aquí hay una demostración: http://jsfiddle.net/83FsJ/

Paso 3) Mejores prefijos de proveedores… En lugar de agregar toneladas de CSS innecesario a los elementos (que simplemente serán ignorados por el navegador), puede usar jQuery para decidir qué proveedor-prefix usar:

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

Aquí hay una demostración: http://jsfiddle.net/83FsJ/1/

También tenga en cuenta que si especifica en su transition declaración de que la propiedad de animar es opacityestableciendo un left la propiedad no se animará.

Su código puede ensuciarse rápidamente cuando se trata de transiciones CSS3. Recomendaría usar un complemento como jQuery Transit que maneja la complejidad de las animaciones/transiciones CSS3.

Además, el complemento usa webkit-transform en lugar de webkit-transition, lo que permite que los dispositivos móviles usen aceleración de hardware para dar a sus aplicaciones web esa apariencia nativa cuando ocurren las animaciones.

Demostración en vivo de JS Fiddle

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 mayor parte del trabajo duro de obtener compatibilidad entre navegadores también se hace por usted y funciona de maravilla en dispositivos móviles.

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador