Transiciones de CSS3 dentro de jQuery .css()

Question

Cuando agrego la línea de transición en mi código, se rompe jQuery. ¿Cómo puedo arreglarlo?

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

Estoy intentando configurar un fundido de un div al siguiente dentro de un deslizador

Answer 1

Paso 1) Retire el punto y coma, es un objeto que está creando ...

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

a

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

Paso 2) vendedor-prefijos ... no hay navegadores utilizan transition ya que es la norma y esta es una característica experimental, incluso en las últimas versiones de navegadores:

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í está una demostración: http://jsfiddle.net/83FsJ/

Paso 3) Mejor Vender-prefijos ... en lugar de añadir un montón de CSS a elementos innecesarios (que acaba de ser ignorado por el navegador) que puede utilizar jQuery para decidir qué vender-prefijo a utilizar:

$('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í es una demostración: http://jsfiddle.net/83FsJ/1/

También tenga en cuenta que si se especifica en la declaración de transition que la propiedad de animar es opacity, estableciendo una propiedad left no será animada.

Answer 2

Su código puede ser muy rápido cuando se trata de transiciones CSS3. Recomendaría utilizar un complemento como jQuery Transit que maneje la complejidad de las animaciones/transiciones de CSS3.

Además, el complemento usa webkit-transform en lugar de webkit-transition, que permite que los dispositivos móviles usen aceleración de hardware para dar a sus aplicaciones web ese aspecto y sensación nativos cuando se producen las animaciones.

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 mayor parte del trabajo duro de conseguir la compatibilidad entre navegadores es hecho por ti, así y funciona como un encanto en los dispositivos móviles.