Animation height "flimre"

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.