On Animation end, component snaps back

[Mike6679]

I'm using the animation below to slide my toolbar up and it slides it , but it doesn't stay.

It slides back to its original position. Is this normal behavior?......if so do I have to explicitly set the new top value for the toolbar? Also in my toolbar config , I specify: top: 1536.

Ext.Anim.run(toolbar,'slide',{
                        direction: 'up',
                        duration: 1000,
                        from:{top:1536},
                        to:{top:1432}
                     });

[Mike6679]

Ok I got it working but not sure its a solution really. I found a stackoverflow thread (here) that suggested to use Ext.Animator.run . Like I said, it does work , but I could not find it documented anywhere and the after function does not get called. Can someone from Sencha clarify?

Ext.Animator.run({
                            element: toolbar.element,
                            duration: 325,
                            easing: 'ease-in',
                            preserveEndState: true,
                            from:{top:1536},
                            to:{top:1432}
                            //after:function(){
                            //    me_navicon.setSrc('resources/images/nav/nav_activate_down.png');
                            //}
                         });

[Mike6679]

Hello? anyone??

[jerome76]

I noticed on that thread that rdougan did comment on it again:

Currently, no. The reason was that we (Sencha) wanted to look at it in more detail in 2.1, and perhaps change how it works. We didn't want to break peoples applications with the 2.1 update, so we resorted to keeping the existing animation system (Ext.Anim) which is buggy (as you have experienced) until we fix up Ext.Animator. For now, your best bet is to look at the source and look at the available properties. Your best start is looking atsrc/fx/animation/Abstract.js. –

rdougan

Mar 26 at 22:34

[Mike6679]

Thanks for that.

[jep]

A little late, but I think I can help you out, Mike. I owe it to you as your post is what turned me onto the Ext.Animator solution. It's possible to hook into several events, one of which is animationend. You can do this on individual animations or on Ext.Animator as a whole. Here's an example of hooking into an individual animation. To do this, you have to instantiate the animation yourself instead of just passing in the config for Ext.Animator to instantiate. Then you can add the event:

label = this.getLabel();
var dx = 100;

var a = new Ext.fx.Animation({
    element:label.element,
    duration:325,
    easing:'ease-in',
    preserveEndState:true,
    from:{top:label.getTop(), left:label.getLeft()},
    to:{top:label.getTop() + dx, left:label.getLeft() + dx}
});

a.on('animationend', function (animation, element, isInterrupted) {
    label.setTop(label.element.getTop());
    label.setLeft(label.element.getLeft());
});

Ext.Animator.run(a);

I was doing something similar to you. I wanted to animate my hint when I clicked on different points on a series. I found that if I used Ext.anims I couldn't easily animate diagonally and I got the snap-back problem. But if I used Ext.Animator with preserveEndState=true, the element stayed where it needed to be. But at the end of the animation element.getTop()/getLeft() still had the old values, thus making it a little difficult the next time through and messing up other stuff. So I did the above and now it's quite happy.

This is based on ST 2.1 RC2. Hopefully they'll just document what they have on Ext.Animator without making major changes that makes this code not work anymore.