Using CSS3 animations on Sencha Touch

So you’ve seen all those cool animations on Touch demos right? Cards with slide effect, Message boxes that pop or fade out, etc… Here are some quick examples and tips on how you can change default animations and add more style to your app.

There’s basically 3 ways you can embed animations in your views:

  1. show(animationCfg) method: pass an individual config with show/hide methods
  2. showAnimation & hideAnimation configs
  3. animations with card layout

And there’s another way to use animations, but it’s intended for individual DOM elements, and not components. It’s the Ext.Anim class.

Check below the code and a working example on how to use each one of these 3 animations + Ext.Anim:

*Touch compatibility webkit only