VLWeb - Prevent Control "Pop In" after Animation

[jyoung]

Working on a responsive menu that has a small animation to provide a "slide down/up" effect.

Here are the different states the menu can be in

menu_horizontal.PNG (18.57 KiB) Viewed 5442 times

menu_collapsed.PNG (16 KiB) Viewed 5442 times

menu_expanded.PNG (19.35 KiB) Viewed 5442 times

Here is the animation when going from collapsed to expanded
https://drive.google.com/file/d/1Pckr4v ... sp=sharing

See how the menu item labels "pop in" after the animation completes? Is there any way to prevent that?

Notice how the slide up just rolls up the labels, i.e. you can still see the labels while the animation is executing.
How do I do that with the down animation?

Here is the animation components.

Code: Select all

define_com class(#PRIM_ANIM) name(#SlideDownAnimation)
define_com class(#PRIM_ANIM.Height) name(#Animation1) parent(#SlideDownAnimation) manage(#COM_OWNER) height(200) duration(500)

define_com class(#PRIM_ANIM) name(#SlideUpAnimation)
define_com class(#PRIM_ANIM.Height) name(#Animation2) parent(#SlideUpAnimation) manage(#COM_OWNER) height(42) duration(500)

Routines

Code: Select all

evtroutine handling(#COM_OWNER.DesignChanged) design(#design)
if (#design *Is *null)
#COM_OWNER.SizeToDesktop
return
endif

case of_field(#design.Name.UpperCase)
when (= TABLET)
#COM_OWNER.SizeToTablet
when (= MOBILE)
#COM_OWNER.SizeToMobile
otherwise
#COM_OWNER.SizeToDesktop
endcase
endroutine

mthroutine name(SizeToDesktop)
#COM_OWNER.ShowHorizontalMenu
endroutine

mthroutine name(SizeToTablet)
#COM_OWNER.ShowHorizontalMenu
endroutine

mthroutine name(SizeToMobile)
#COM_OWNER.ShowVerticalMenu
endroutine

mthroutine name(ShowHorizontalMenu)
#ToggleImage.Visible := False

#MenuPanel.LayoutManager <= #HorizontalMenuLayout
#COM_OWNER.Height := 42

#ToggleImage.DisplayPosition := 1
#AdminLabel.DisplayPosition := 2
#DepartmentLabel.DisplayPosition := 3
#DirectReportsLabel.DisplayPosition := 4
#RequestsLabel.DisplayPosition := 5
endroutine

mthroutine name(ShowVerticalMenu)
#ToggleImage.Visible := True
#MenuPanel.LayoutManager <= #VerticalMenuLayout

#ToggleImage.DisplayPosition := 1
#AdminLabel.DisplayPosition := 5
#DepartmentLabel.DisplayPosition := 4
#DirectReportsLabel.DisplayPosition := 3
#RequestsLabel.DisplayPosition := 2
endroutine

evtroutine handling(#ToggleImage.Click)
if (#COM_OWNER.Height = 42)
#SlideDownAnimation.Start
else
#SlideUpAnimation.Start
endif
endroutine

[Stewart Marshall]

Hi Joe

Animations execute in their own world, so the VL runtime can only set its state after the animation completes. So, if you have any layout managers, they will be evaluated once the animation has executed.

This means that to get the effect you want, you'll need to have all the menu items in the right place before you animate the height of the container.

Regards

[jyoung]

Took some work trying to figure this out. Building off Stewart's comment that everything needs to be in the right place before you start makes sense, but I was still getting the pop in. I would set the appropriate Layout then trigger the animation, however the pop in still occurs.

The docs provide a clue

When an animation starts, the animating controls are not bound by the rules of Layout Managers.

This had me stumped for a while because "everything" is in a LayoutManager. Drop a control on the form and you have a Layout Manager.

After some experimentation, it seems the above applies when you have multiple LayoutManagers that you are swaping out. i.e. #MenuPanel.LayoutManager <= #HorizontalMenuLayout and #MenuPanel.LayoutManager <= #VerticalMenuLayout

If you only use one LayoutManager, you have to adjust the individual layout items instead of swapping Layouts.

Code: Select all

evtroutine handling(#COM_OWNER.DesignChanged) design(#design)
if (#design *Is *null)
#COM_OWNER.SizeToDesktop
return
endif

case of_field(#design.Name.UpperCase)
when (= TABLET)
#COM_OWNER.SizeToTablet
when (= MOBILE)
#COM_OWNER.SizeToMobile
otherwise
#COM_OWNER.SizeToDesktop
endcase
endroutine

mthroutine name(SizeToDesktop)
#ToggleImage.Visible := False
#COM_OWNER.PrepareHorizontalMenu
endroutine

mthroutine name(SizeToTablet)
#ToggleImage.Visible := False
#COM_OWNER.PrepareHorizontalMenu
endroutine

mthroutine name(SizeToMobile)
#ToggleImage.Visible := True
#COM_OWNER.PrepareVerticalMenu
endroutine

mthroutine name(PrepareVerticalMenu)
#ToggleImageLayoutItem.Flow := Down
#RequestsLayoutItem.Flow := Down
#DirectReportsLayoutItem.Flow := Down
#DepartmentLayoutItem.Flow := Down
#AdminLayoutItem.Flow := Down

#ToggleImage.DisplayPosition := 1
#RequestsLabel.DisplayPosition := 2
#DirectReportsLabel.DisplayPosition := 3
#DepartmentLabel.DisplayPosition := 4
#AdminLabel.DisplayPosition := 5
endroutine

mthroutine name(PrepareHorizontalMenu)
#ToggleImageLayoutItem.Flow := Left
#RequestsLayoutItem.Flow := Left
#DirectReportsLayoutItem.Flow := Left
#DepartmentLayoutItem.Flow := Left
#AdminLayoutItem.Flow := Left

#ToggleImage.DisplayPosition := 1
#AdminLabel.DisplayPosition := 2
#DepartmentLabel.DisplayPosition := 3
#DirectReportsLabel.DisplayPosition := 4
#RequestsLabel.DisplayPosition := 5

#COM_OWNER.Height := 42
endroutine

evtroutine handling(#ToggleImage.Click)
if (#COM_OWNER.Height = 42)
#SlideDownAnimation.Start
else
#SlideUpAnimation.Start
endif
endroutine

This works without the annoying pop in.