Titanium Alloy - How to animate a View from 0 height to “auto”

4
votes

In Titanium Alloy, I'm looking to animate a View from a height of 0, to a height of "auto" or Ti.UI.SIZE. The View contains a Label, which has a varying amount of text in it that can span over several lines, so I need the View to animate to the height that it needs just to show the Label within. The idea is that you click a button and it animates the View and text to slide open. Similar to the jQuery slideDown animation seen a lot on the web.

enter image description here

The problem I'm having is that if I try to animate to a height of "auto" or Ti.UI.SIZE, the animation doesn't seem to happen at all. Animating to a fixed height works, but I need it to be flexible to contents of the view.

My view

<Button id="toggleBrandInfoBtn" onClick="toggleBrandInfo" title="Show Text" />
<View id="brandInfo" layout="vertical" height="0">
    <Label id="brandInfoLabel" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor."></Label>
</View>

Controller

$.brandInfo.anchorPoint = {x:0, y:0};  

$.toggleBrandInfoBtn.addEventListener("click", function () {
    $.brandInfo.animate({
        anchorPoint: {x:1, y:1},
        top: 0,
        height: Ti.UI.SIZE,
        duration: 1000
    });
});
3
titaniumappceleratortitanium-alloy

3 Answers

1
votes

As of SDK 3.3.0 this is not possible.

One way around the problem might be to start with brandInfo visible=false and height Ti.UI.SIZE From that get the view height required for the content and store.

Then as part of your animation sequence set the height to zero, make visible = true and then do the animation to the pre-calculated height stored earlier.

3
votes

Have you tried a percentage value? This is not necessarily documented but I have had some success with it. Also try a 1% starting value.

$.brandInfo.anchorPoint = {x:0, y:0};  

$.toggleBrandInfoBtn.addEventListener("click", function () {
    $.brandInfo.animate({
        anchorPoint: {x:1, y:1},
        top: 0,
        height: '100%',
        duration: 1000
    });
});
1
votes

I had the same issue and this module helped me out there:

https://github.com/animecyc/TitaniumAnimator