5

I've a problem with css transition in Firefox. I use Twitter Bootstrap carousel. I've made some changes, so pictures don't slide from right to left. Instead, they fade in and fade out. I've also added some css transitions on carousel captions.

Here is my code: http://jsfiddle.net/Jh3rF/181/

Everything works fine in Chrome but not in Firefox (version 16, Mac). When I click on the next link in the carousel, there is a nice transition. Active slide fades out and caption moves to right. But caption of the next slide shows suddenly, whereas in Chrome there is a nice transition (caption goes from up to down and it fade in nicely). I can't find any error here.

I'd be grateful for any advice.

wawka
  • 4,828
  • 3
  • 28
  • 22

2 Answers2

0

Try declaring base values for properties you want to have transition effect, as answered in this post:

Why is my CSS3 Transition not working in Firefox?

Community
  • 1
  • 1
Michał Rakowski
  • 81
  • 1
  • 5
  • 1
    I also thought that it would be a case. I tried that but it didn't help. http://jsfiddle.net/Jh3rF/261/ – wawka Nov 03 '12 at 08:39
0

I just had the same problem, the animation works great on Google Chrome but in Firefox it appears suddenly.

So what I've done is pretty simple, it removes and adds the classes when the next slide comes.

So here is the 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);
    });
});
MTC
  • 21
  • 1
  • 3