Animation height "flimre"

Hej Alle

Jeg har ikke været her inde i flere år, så jeg ved ikke om der findes en Adobe Flex kategori, men jeg prøver lykken:

Jeg har følgende kode :

==========================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.effects.AnimateProperty;
            private function closeTopBox() : void
        {
            var ani:AnimateProperty = new AnimateProperty(menuBar);
            ani.property="height";
            if(menuBar.height > 50)
            {
                ani.fromValue = 100;
                ani.toValue = 20;
            } else {
                ani.fromValue = 20;
                ani.toValue = 100;
            }
            ani.duration = 500;
            ani.play();
        }
        ]]>
    </mx:Script>
       
    <mx:Canvas id="menuBar" width="77.5%" left="10" height="100" backgroundColor="0xFFFFFF" borderStyle="solid" borderColor="#B0B0B0" borderThickness="2" cornerRadius="4">
            <mx:VBox height="15" horizontalAlign="center" bottom="0" width="100%" backgroundColor="#e3e3e3" borderStyle="solid" borderThickness="1" borderColor="#b0b0b0">
                <mx:Button height="15" verticalCenter="0" click="closeTopBox()" toggle="true"/>
            </mx:VBox>
           
        </mx:Canvas>
</mx:Application>
==========================================================

Mit problem er at når jeg benytter AnimateProperty, så "flimre" boksen, når den åbner og lukker. Det er tydeligvis noget med at indholdet ikke kan nå at blive gjort mindre, før animationen køre, eller også har jeg overset et eller andet. Det virker fint, når jeg benytter den på width.