Sticking Two Views Together During a Height Animation

Hi all-

I have a very simple height animation question. I have a window containing two views. The window is set to be a vertical layout. Ideally, I would like to animate the height of the first view, and as the height animates to its final height, the second view would stick to the bottom of the top view. Both views top positions are set to 0. What I find though is that on animate, the second view automatically moves to it's ending position (post animation of the first view's height adjustment), and then the first view slowly animates to the new height.

Does anyone know how to perform this animation so it appears that the views appear to be glued together, so as the first view shrinks, it reveals the second view?

Sample View:

<Alloy>
    <Window id="myWin" class="container" layout="vertical">
        <View id="red" backgroundColor="red" height='100%' top="0">
            <Button onClick="doClick">Layout</Button>
        </View>
        <View id="yellow" backgroundColor="yellow" height='300' top="0">
 
        </View> 
    </Window>
</Alloy>

Sample Controller:

function doClick(e) {
   $.red.animate({
            height: '50%', 
            duration:3800
    });
}
 
$.myWin.open();