Twitter Bootstrap carrousel - Transition CSS dans Firefox - css, firefox, google-chrome, twitter-bootstrap, css-transitions

J'ai un problème avec la transition CSS dans Firefox. J'utilise le carrousel Twitter Bootstrap. J’ai fait quelques changements, les images ne glissent donc pas de droite à gauche. Au lieu de cela, ils apparaissent et disparaissent progressivement. J'ai également ajouté des transitions CSS sur les légendes du carrousel.

Voici mon code: http://jsfiddle.net/Jh3rF/181/

Tout fonctionne bien dans Chrome mais pas dansFirefox (version 16, Mac). Lorsque je clique sur le lien suivant dans le carrousel, il y a une belle transition. La diapositive active s'estompe et la légende se déplace vers la droite. Mais la légende de la diapositive suivante apparaît soudainement, alors que dans Chrome, il y a une belle transition (la légende va du haut vers le bas et se fond bien). Je ne trouve aucune erreur ici.

Je serais reconnaissant pour tout conseil.

Réponses:

Essayez de déclarer les valeurs de base des propriétés pour lesquelles vous souhaitez un effet de transition, comme indiqué dans cet article:

Pourquoi ma transition CSS3 ne fonctionne-t-elle pas dans Firefox?

Je viens d'avoir le même problème, l'animation fonctionne très bien sur Google Chrome mais dans Firefox, elle apparaît soudainement.

Donc, ce que j’ai fait est assez simple, il supprime et ajoute les classes à la prochaine diapositive.

Alors voici le code:

$("#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);
});
});