Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2469 in a recent build.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    44
    Vote Rating
    3
    dkamins is on a distinguished road

      0  

    Default Callback function after card transition animation completes? (worked in ST1, not ST2)

    Callback function after card transition animation completes? (worked in ST1, not ST2)


    ST1 card layouts had setActiveItem to swap between cards, including animations via the "cardSwitchAnimation" parameter.

    In ST2, setActiveItem no longer has animation params. According to rdougan, In ST2 we are supposed to use the new animateActiveItem instead. This works for the most part.

    However with ST1's setActiveItem, you could pass a function in the animation spec as "after" and it would get called after the transition animation completed. This was great for e.g. cleaning up & deleting resources from the card you were transitioning away from, since you knew exactly when it was finally off-screen.

    With ST2's animateActiveItem, you can pass an "after" param as part of the animation, but it no longer accepts a function. If you try it, an error similar to the following is logged:
    Code:
    sencha-touch-all-debug.js:26157
    Uncaught Error:
    [ERROR][Ext.fx.animation.Abstract#applyAfter] Invalid config, must be a valid config object
    From reviewing the SDK source, it looks like ST2 is expecting some kind of CSS adjustment like this:
    Code:
    after: { 'z-index': 0 }
    How do we pass an actual function to run after the animation completes, so that we may properly clean up our resources as was possible in ST1?

  2. #2
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    By right, you should be able to do this:

    Code:
    container.animateActiveItem(newItemIndex, {
        type: 'slide',
        ...
        listeners: {
            animationend: function(){
                /// ...
            }
        }
    })
    However there's an existing bug that causes this listener to be fired more than once, which will be addressed in the next release.
    Sencha Touch Lead Architect

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    44
    Vote Rating
    3
    dkamins is on a distinguished road

      0  

    Default Confirming bug

    Confirming bug


    Just confirming the bug. This event gets triggered 3 times for me. The Ext.Component.destroy() call appears to be idempotent, in that it's harmless to call it each time. At least so far nothing bad has happened...

  4. #4
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    This has been fixed for the next release
    Sencha Touch Lead Architect

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    82
    Vote Rating
    2
    sencha-noob is on a distinguished road

      0  

    Default Not fixed in 2.0.1 RC

    Not fixed in 2.0.1 RC


    Just to be clear, this is NOT fixed in 2.0.1 RC. I assume you mean it's fixed in the next release of 2.0.1?

    And also I'm assuming when you say it's fixed, you mean the after config option rather than the workaround you posted repeating?

    Thanks

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Yes, it will be corrected for the 2.0.1 final release.

    Sencha Inc

    Jamie Avins

    @jamieavins

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    44
    Vote Rating
    3
    dkamins is on a distinguished road

      0  

    Default


    Quote Originally Posted by Jacky Nguyen View Post
    By right, you should be able to do this:

    Code:
    container.animateActiveItem(newItemIndex, {
        type: 'slide',
        ...
        listeners: {
            animationend: function(){
                /// ...
            }
        }
    })
    However there's an existing bug that causes this listener to be fired more than once, which will be addressed in the next release.
    Is the fix that this will only be called once? I.e. going forward this is the proper way to connect an event to the end of the animation?
    Thank you!

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    82
    Vote Rating
    2
    sencha-noob is on a distinguished road

      0  

    Default


    And the workaround is fired 3x for me - which makes it a non-starter

  9. #9
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    This is a workaround until the fixed code is released.

    Sencha Inc

    Jamie Avins

    @jamieavins

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    44
    Vote Rating
    3
    dkamins is on a distinguished road

      0  

    Default


    Just for posterity clarity, can you please confirm:

    1. In 2.0.1 final release, the animation 'after' param will again be able to take a function (as it did in ST1)

    2. In 2.0.1 final release, the animation 'after' param will also be able to take a CSS dict (as it does in ST2 < 2.0.1) ? (or was this accidental behavior that will be removed?)

    3. The listeners/animationend is what is being referred to as the "workaround".

    4. The listeners/animationend will still possibly be called ~3 times, as this is not being fixed.

    Thanks, guys.