How to animate row height in Titanium iphone - ios

Question

I am working on Table view in Titanium iphone.
I tried to add animation style for each row.
That is, when user click on each row , then row height need to increase, So I able to show hided contents in row. And when user click again then the row height need to decrease.
My code is,
for collapsed view,
var animation = Ti.UI.createAnimation({height: 1, duration: 500});
row.animate(animation);
and for expanded view,
row.animate(Ti.UI.createAnimation({ height:200, duration:300 });
but above both code are not working,
If I set row height without using animation then its working fine.
How to apply animation style for table view row...
can any one please.

Answer 1

you can try this
http://developer.appcelerator.com/question/119198/animating-row-height-changes
TableViewRow cannot be animated. It's documentation bug. You need to make your own animation function (ie, setTimeout).

Answer 2

The height of the row is animated by default (on iOS) when you change it, so :
row.height = '40dp';

Answer 3

If you set the row height directly to a numeric value, it will be animated by default on iOS. The default animation will override any custom animations you might come up with for example using the standard setTimeout javascript function.
The difficulty is to make the row content appear animated as well. Let's say row.details points to a container view that holds the hidden row details to be shown on expansion. It's height would be initialy set to zero. The following piece of code will animate the whole row in a smooth way:
var total_height_increase = 260;
var height_step = 5;
var duration = 200;
var time_step = duration * height_step / total_height_increase;
var num_steps = duration / time_step;
var i=0;
var increase_height = function(){
setTimeout(function(){
row.details.height += height_step;
i += 1;
if (i > num_steps) return;
increase_height();
}, time_step);
};
increase_height();
row.height += total_height_increase;