Bind CSS3 Animation Callback using Knockout.js

Question

I'm building a "WebApp" for iPad using Knockout.js and CSS3 Animations.

The transition between different pages is animated. I want to get a JavaScript callback when the Animation ends.

Now i know you can catch the callback using Javascript like this:

element.addEventListener(webkitAnimationEnd, function(){callfunction()},false);

But isn't there a better way to do this? The "knockout way"? I want to bind the callback function using the data-bind attribute in the DOM rather than accessing the DOM element in my javascript code!

Any ideas?

EDIT: Maybe i should add that i'm new to Knockout.js and i don't know if what i'm trying to do or rather, how i'm trying to do it makes sense or if you just do it the conventional way!

Answer 1

I use jQuery Transit and a knockout custom binding to accomplish a sliding page transition. Basically, it slides the active page (div) out and slides a new one in. It looks good on mobile devices too (iPad, iPhone, iPod Touch, Android phones, etc.). Here is the binding:

Javascript:

    var previousElement = null;
    ko.bindingHandlers.slideVisible = {
        init: function (element, valueAccessor)
        {
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value));
        },
        update: function (element, valueAccessor)
        {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (value)
            {
                if (previousElement == null)
                { // initial fade
                    $(element).show();
                }
                else
                {
                    //uses CSS3 Transform for smooth mobile performance
                    $(previousElement).transition({ x: '-100%' }, function () { $(this).hide(); });
                    $(element).css({ x: '100%' });
                    $(element).show().transition({ x: '0%' }, function () 
{ 
//Callback | transition finished code here
});
                }
                previousElement = element;
            }
        }
    };

View Model Snippet:

isPageVisible: ko.observable(false)

HTML:

<div data-bind="slideVisible: isPageVisible">
<!-- Page Content Here -->
</div>

JS Fiddle Demo

Answer 2

From my experience there is no 'knockout way' to handle those sorts of events.

Knockout's author suggests using the KO event binding for simple bindings. But for more complex and/or unobtrusive event binding scenarios suggests using jQuery: http://knockoutjs.com/documentation/unobtrusive-event-handling.html

I'm working on a project now using Knockout and I followed his suggestion. Using some KO event bindings (for form submits) and some jQuery event bindings (for a window resize event in my case).

Of course, you don't need to use jQuery, but going outside the KO library in your case is probably the correct route. Have fun!