PDA

View Full Version : how to apply animation to an element



jeanluca
27 Apr 2012, 9:52 AM
Hello

Is it possible to animate an element by its 'left/top' style property based on its id (using Sencha Touch 2 of course)?

I've checked Ext.Anim but I don't think that object can do it. Any suggestions how to do this ?

Cheers
Luca

trinitrotoluen
28 Apr 2012, 4:21 PM
As an alternative you can try adding custom css animation function to your element, something like this :

.anim {
vertical-align:middle;
padding-left:34px;
padding-top:21px;
background-color:#000000;
width:80px;
height:63px;
-webkit-transition-duration: 90ms;
-webkit-transform: translate3d(0,0,0);
-webkit-transition-timing-function:ease-in;
left: 0;
top: 0;
}

I implemented the code to animate an image in each item of my list component

jeanluca
28 Apr 2012, 11:48 PM
thanks, I didn't think of that! Very useful indeed!!

BTW, I found out how to do it with animations in ST: http://stackoverflow.com/questions/9872730/animating-dimensions-in-sencha-touch-2