6 Replies Latest reply on Sep 1, 2011 2:54 AM by Francisc

    Height animation

    Francisc Level 3



      I want to place a Custom Component and have it animate its height from 0 to its "normal" height.


      In the initialize event handler I am setting height to 0 (setting it in creationComplete will show a flicker) and in creationComplete event handler I am animating to "normal" height.


      Problem is I had to hard code the "normal" height because I cannot figure out how to get it.


      I event tried setting includeInLayout=false and visible=false in initialize and trying to get this.height in creationComplete, but it returns 0.


      How can I get the height please?

        • 1. Re: Height animation

          Why not make the default visible = false, then in the after you set the size to 0. make it visible = true. then use the resize effect.

          • 2. Re: Height animation
            Francisc Level 3



            Thanks, but the element I want to animate comes between 2 other components and I wanted it to "grow" between them rather than just abrupty make space for itself in which to grow.


            I managed to do what I want with a hard coded height, but I don't like that.


            I still need to get the height of the component before showing it or including it in layout.

            • 3. Re: Height animation
              miguel8312 Level 3


              if i understand your question correctly you have a custom component that you build and you would like to actually animate the height of that component.

              you must give the component a minheight property so that flex atleast knows what the component should be when placed on the display list.

              Another tip I would offer you is setting a function and using the timerevent on the creation complete. wait 1 or 2 seconds or even 30 milliseconds to run your resize function and this would make your transition look smoother.

              I hope that helps.


              • 4. Re: Height animation
                Francisc Level 3



                I could set a minHeight, but it won't really help because I don't know the height I want to resize to.

                I need a way to get the height of the component, I would have thought that creationComplete is fired after laying out children and measuring, but guess not.

                • 5. Re: Height animation
                  drkstr_1 Level 4

                  You can use  getPreferredBoundsHeight() to get the preferred height, then animate to that value after creation complete. You may need to store the value before setting the height to 0. I'm pretty sure explicitly setting the height affects the preferred height...

                  • 6. Re: Height animation
                    Francisc Level 3

                    I am setting this.height=0 in the initialize handler.

                    I'll try getPreferredBoundsHeight() before that in the init handler, but it's probably too soon.


                    There's a flicker if I set this.height=0 in creationComplete and this.height returns 0 when includeInLayout is false, but maybe getPreferredBoundsHeight() works with includeInLayout false.


                    Was hoping for something like JavaScript DOM functionality, where elements created in memory can be measured.


                    I'll give it a go.