A better way to receive a promise on drawer's transition completion?

[Sergei]

I have observed that drawer animation becomes "jumpy" if view performs a lot of data loading and binding on show. As a way around it, I am building postponing any heavy duty processing until the animation is completed.

I am using deferred promises to watch for the transition to complete using the following. Here's a question: is there a way to do it?

$.Deferred(function(){
    var promise = this;
    timer = setInterval(function() {
        if ($("#my-drawer:not(:visible)")[0]) {
            clearInterval(timer);
            promise.resolve();
        }
    }, 100);
})

[Sergei]

A slightly better version. But I'd like to get rid of the timer. 

$.Deferred(function(){
            var     promise = this,
                    kendoDrawer = $("#my-drawer").data("kendoMobileDrawer");
            timer = setInterval(function() {
                if ( !kendoDrawer.visible && !kendoDrawer._transitioning ) {
                    clearInterval(timer);
                    promise.resolve();
                }
            }, 100);
        })

[Kiril Nikolov]

Hello Sergei,

Currently the hide event of the Drawer fires when the closing animation starts. I agree that it will be useful to have an event that fires when this animation is completed, so I have added this to our internal tracker and it will be implemented with one of the next builds.

In the mean time, I cannot offer you a solution that uses the Drawer API to achieve the functionality that you are looking for (will be addressed when the new event is added) and your solution seems like the best possible way to achieve what you are looking for at the moment.

Regards,
Kiril Nikolov
Telerik