1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    19
    Vote Rating
    1
    Answers
    1
    chris_np is on a distinguished road

      0  

    Default Answered: What's the best way to swap two panels with a fade?

    Answered: What's the best way to swap two panels with a fade?


    Hello there.

    I'm wondering what is the best way to swap out two panels on the screen with a fade effect?

    I have two panels which I have positioned over top of each other using CSS. panelOne is visible, panelTwo is hidden.

    On click of another button (not on either panel), I want panelOne to fade out and panelTwo to fade in.

    I currently have this working using the code below, but I find it's quite laggy on some Android devices we have here for testing. Is there a better way to do it than what I'm currently using? How can I improve this animation?

    This code is executed on button tap:

    Code:
    Ext.Anim.run(panelOne, 'fade', {
      duration: 100,
       after: function() {
          panelOne.hide();
        }
    });
    Ext.Anim.run(panelTwo, 'fade', {
      out: false,
       duration: 100,
        before: function() {
           panelTwo.show();
      }
    });
    Any help is much appreciated.

    Thanks.

  2. If the container that is going to hold these panels is a card layout, then just specify the animation config in the layout config and setActiveItem will animate between the two.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If the container that is going to hold these panels is a card layout, then just specify the animation config in the layout config and setActiveItem will animate between the two.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    19
    Vote Rating
    1
    Answers
    1
    chris_np is on a distinguished road

      0  

    Default


    Thanks mitchellsimoens.

    I've implemented this method, and while I agree it is a better way to do it, it doesn't seem to have increased the performance of the fade on the Android devices I have here.

    Oh well, I guess that's just the way it is.

    Thanks for your help.

Thread Participants: 1

Tags for this Thread