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:
- show(animationCfg) method: pass an individual config with show/hide methods
- showAnimation & hideAnimation configs
- 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
Camilo Costa Campos liked this on Facebook.
[…] covered how to use animations in Using CSS3 animations on Sencha Touch and Animate components in a view, but I didn’t cover the internals of the framwework, nor how […]