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

[chris_np]

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:

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.

[mitchellsimoens]

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.

[chris_np]

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.