How can I ensure this CSS transition animates

Question

I have an image carousel built using knockout & jquery. To animate the slides I really want to use CSS transitions and NOT jquery animate. I have this nearly working but I have an issue. In the code below, the 'slideRight' part doesn't work, however the else part works fine. What's happening is the transition to margin-left 0 is being skipped, even though the transition class has been added.

if (slideRight) {
    $(requestedElement).insertBefore(currentElement);
    slideContainer.css('margin-left', -$(self.carousel).width());
    slideContainer.addClass('transition');
    slideContainer.css('margin-left', 0);
} else {
    $(requestedElement).insertAfter(currentElement);
    slideContainer.addClass('transition');
    slideContainer.css('margin-left', -$(self.carousel).width());
}

I've created a JSFiddle here: http://jsfiddle.net/vnw57nx0/2/

As you'll see in the fiddle, the carousel transitions nicely between slides going right to left.

But if you find this line in the javascript:

self.setIndex(self.currentIndex() + 1);

and change it to:

self.setIndex(self.currentIndex() - 1);

the slides should cycle in reverse. They do, but they're not being animated. Interestingly, if I debug the script and step through it works fine. This made me think it was a timing issue and maybe I need to use a callback function but jquery .insertBefore, .css and .addClass are all synchronous.

Any ideas how I can fix this code that works if I debug but doesn't if I don't?

Answer 1

It seems that the browser doesn't make a transition when you revert a style value within the same context. You need to do it in a new context using something like setTimeout :

if (slideRight) {
    $(requestedElement).insertBefore(currentElement);
    slideContainer.css('margin-left', -$(self.carousel).width());
    setTimeout(function() {
        slideContainer.addClass('transition');
        slideContainer.css('margin-left', 0);
    });
} else {

http://jsfiddle.net/vnw57nx0/3/

I found this question because of the Knockout tag, and although you've got Knockout references in your question, the problem has nothing to do with Knockout. In fact, your code is very anti-Knockout since you're using jQuery selectors within your "view model" and using observables where none are needed or even useful.