Ext.Anim 'after' callback?

[bjudson]

I'm seeing in several applications an 'after' config option for Ext.Anim that allows one to define a callback to fire once the animation is complete. This is not mentioned in the Sencha Touch API, and the Sencha 4 API has a different config option called 'callback'. When I look at the Sencha Touch source, it appears to reference an after config option:

    run:function(el, config){
        el =Ext.get(el);
        config = config ||{};


        var me =this,
            style = el.dom.style,
            property,
            after = config.after;

        if(me.running[el.id]){
            me.onTransitionEnd(null, el,{
                config: config,
                after: after
            });
        }

But including this as a config doesn't seem to do anything:

        new Ext.Anim({
           from: {'opacity': 1},
           to: {'opacity': 0},
           duration: 500,
           after: function () {
               console.log('after');
           }
        }).run(item.target);

This will run the animation, but will not run the 'after' function. What is the appropriate way to define a callback for Ext.Anim?

[AndreaCammarata]

Hi bjudson.
If you want to add a callback function to be called at your animation end, you can simply write your code in the following way:

//Define your animation
var animation = new Ext.Anim({
       easing: 'easeIn',
       duration: 500,
       autoClear: false,
       from: {
           opacity: 1
       },
        to: {
            opacity: 0
       }
});
        
//Run the animation
animation.run(item.target, {
   after: function(){
         console.log('after');
    }
});

Hope this helps.

[bjudson]

Just what I was looking for...

[AndreaCammarata]

Just what I was looking for...

You are welcome

[makiss]

Would be bloody nice if someone put "after" in the docs

http://docs.sencha.com/touch/1-1/#!/api/Ext.Anim

[alex90]

If you want to add an callback you can do like this:

Ext.Anim.run( 
        element.target, 
        'fade', 
        { 
           duration: 1500, 
           autoClear: false, 
           easing: 'ease-in', 
           from: { 
               opacity: 1 
           }, 
           to: { 
              opacity: 0 
           }, 
            after: function(el){ 
               //do what you want 
               Ext.get(el).destroy(); 
           } 
        } 
)