Capture CSS3 Animations Event in JavaScript

Hello,

This is my first blog on CSS 3 animations. Recently I was working on project where I created some CSS 3 animation. It was a sencha touch project, so we have some requirements like when animation ends we have to switch active item on view port. This we can only do in JavaScript and for that we have to capture CSS 3 animations events in JavaScript. So how to do it?

Basically we are going to add event handler. In case of web kit browser this is webkitAnimationEnd and webkitAnimationStart events. Please note that this event will only work if you have used -webkit-animation on the target. If you are using Transitions, there are some other events. I will cover that in next blogs. Check the code below. This shows exact syntax of adding animation start and end events.

Suppose you have html element with id box1 on which you are applying some CSS 3 animation.

document.getElementById("box1").addEventListener('webkitAnimationStart',function(event){

},false);

Above code will capture animation start event.

document.getElementById("box1").addEventListener('webkitAnimationEnd',function(event){

},false);

Above code will capture animation end event.

If you have infinite animation above functions be invoked every time when animation starts or ends. You also get event object as a parameter to callback function. It contains the target which invoked this event. You can get it using event.srcElement

Please note that above code will only work on web kit browsers.

Sencha Touch - Add callback function to animateActiveItem

Hello,

Recently I was working on a sencha touch project and faced an interesting issue. There was a requirement to adjust the layout after animation is completed. When we do animateActiveItem, you might not have noticed this but animateActiveItem is asynchronous. By default sencha touch has animation duration of 250ms. So  when you write following statement.

this.getMain().animateActiveItem(item,{ type: 'slide', direction: 'right'});
this.getMain().query('#element').hide();

You will notice that your element is hidden before animation is completed. You may increase the duration to see this.


this.getMain().animateActiveItem(item,{ type: 'slide', direction: 'right', duration:2000});
this.getMain().query('#element').hide();


So sometimes you might have annoying effects like, some of your UI jumps. To avoid this and have smooth transition, callback is necessary so UI changes can be adjusted after animation is completed. So how to do that? Here is the trick

Override animateActiveItem function of Ext.container


Ext.override(Ext.Container, {
    animateActiveItem: function(activeItem, animation, callback) {
        var layout = this.getLayout(),
            defaultAnimation;
     
        if (this.activeItemAnimation) {
            this.activeItemAnimation.destroy();
        }
        this.activeItemAnimation = animation = new Ext.fx.layout.Card(animation);
        if (animation && layout.isCard) {          
            animation.setLayout(layout);
            defaultAnimation = layout.getAnimation();          
            if (defaultAnimation) {
                defaultAnimation.disable();
                animation.on('animationend', function() {                  
                    defaultAnimation.enable();
                    animation.destroy();

                    if(callback){
                          callback();  
                    }
                }, this);
            }else{
                animation.on('animationend', function() {                  
                    animation.destroy();
                    if(callback){
                          callback();  
                    }
                }, this);
            }
        }
        return this.setActiveItem(activeItem);
    }
});

See the following code carefully.


if(callback){
     callback();  
}

I have added callback function as a parameter in method and that will be invoked when application end. I added this in both if and else part so it will be invoked if you have specified the animation or you are using default animation.

Now your animateActiveItem function call is changed. See the code below.

this.getMain().animateActiveItem(item,{ type: 'slide', direction: 'right', duration:2000},function(){
//your callback function code.
});

See the last parameter, that is your callback function.

Hope this posts helps you.