Twitter Bootstrap carousel - transizione css in Firefox

Question

Ho un problema con la transizione css in Firefox. Uso il carosello di Twitter Bootstrap. Ho apportato alcune modifiche, quindi le immagini non scorrono da destra a sinistra. Invece, svaniscono e scompaiono. Ho anche aggiunto alcune transizioni di CSS sulle didascalie dei caroselli.

Ecco il mio codice: http://jsfiddle.net/Jh3rF/181/

Tutto funziona bene in Chrome, ma non in Firefox (versione 16, Mac). Quando clicco sul prossimo link nel carosello, c'è una bella transizione. La diapositiva attiva si dissolve e la didascalia si sposta a destra. Ma la didascalia della prossima diapositiva appare all'improvviso, mentre in Chrome c'è una bella transizione (la didascalia va dall'alto verso il basso e svanisce bene). Non riesco a trovare alcun errore qui.

Sarei grato per qualsiasi consiglio.

Answer 1

Prova dichiarando valori di base per le proprietà che si desidera avere effetto di transizione, come risposta in questo post:

Why is my CSS3 Transition not working in Firefox?

Answer 2

Ho appena avuto lo stesso problema, l'animazione funziona alla grande su Google Chrome, ma in Firefox è appare all'improvviso.

Quindi quello che ho fatto è piuttosto semplice, rimuove e aggiunge le classi quando arriva la diapositiva successiva.

Quindi, ecco il codice:

$('#carousel-main').on('slide.bs.carousel', function (e) { 
    $(e.relatedTarget).find('.animated').each(function() { 
     var item = $(this); 
     var classes = item.attr('class'); 
     item.attr('class', ''); 
     item.hide(); 
     setTimeout(function(){ 
      item.show(); 
      item.addClass(classes); 
     }, 10); 
    }); 
});