Expand and Collapse Animation Effects

ComponentOne ToolBar for ASP.NET AJAX: ToolBar Behavior > Animation > Expand and Collapse Animation Effects

You can change how node items expand or collapse by using one of the 27 built-in animation effects. These animation effects are available through the CollapseAnimation and ExpandAnimation properties. Expand and collapse animation effects are special visual effects that occur while the dropdown items open or close. For each dropdown item you can specify how long the dropdown items will be hidden by specifying an integer value for the CollapseDuration property. You can use the ExpandDuration to specify how long the dropdown items will be shown. The duration is measure in milliseconds. By default, the toolbar items open and close without an animation effect.

Typically the animations that scroll in, fade in, fold in, close or drop in are used on closing dropdown items and the animations that scroll out, fade out, fold out, open, or drop out, are used on opening dropdown items. To disable an animation effect for the collapsed nodes or expanded nodes, set the CollapseAnimation or ExpandAnimation property to None.

Use this property to specify the animation effect when the user opens or closes the dropdown object

The following table lists and defines each animation effect:

Animation Name	Animation Description
None(Default)	Disables animation behavior for the expanding or collapsing toolbar items.
FadeIn	Performs a fade in from the current opacity to the maximum opacity.
FadeOut	Performs a fade out from the current opacity to the maximum opacity.
ScrollInFromTop	Scrolls down from the top to bottom.
ScrollInFromRight	Scrolls in from the right end to the left end.
ScrollInFromLeft	Scrolls in from the left end of the toolbar to the right end of the toolbar.
ScrollOutToTop	Scrolls out of view from the bottom to the top of the toolbar.
ScrollOutToRight	Scrolls out of view from left to right.
ScrollOutToBottom	Its scrolls out of view from the top down to the bottom.
ScrollOutToLeft	Scrolls from the right side toward the left side of the toolbar.
Fold	Folds the toolbar.
UnFold	Unfolds the toolbar
OpenVertically	Opens the toolbar vertically from the center of the toolbar.
CloseVertically	Closes the toolbar vertically from the center of the menu.
OpenHorizontally	Opens the toolbar horizontally from left to right.
CloseHorizontally	Closes the toolbar horizonally from right to left.
Shake	Moves the toolbar back and fourth from left to right.
Bounce	Moves the toolbar nodes up and down.
DropInFromTop	The toolbar nodes start moving upward from its default location to near the top of the page. The toolbar node’s opacity decreases as it moves further upward away from its default location.
DropInFromRight	The toolbar nodes appear to the far left side of the toolbar control and move toward the right and stop once it reaches its default location (the location of its associated parent toolbar item). The moving toolbar node’s opacity increases as it moves closer to its default location.
DropInFromBottom	Drops downward with the bottom of the toolbar items appearing first. The toolbar’s opacity increases as it moves down to meet with its associated parent toolbar item.
DropInFromLeft	The toolbar items appear to the far right side of the toolbar control and move toward the left and stop once it reaches its default location (the location of its associated parent toolbar item). The moving toolbar node’s opacity increases as it moves closer to its default location.
DropOutToTop	Moves upward from bottom to the top of the toolbar and gradually fades out as it’s moving upward.
DropOutToRight	Moves to the right of the parent toolbar item and gradually fades as it’s moving to the right.
DropOutToBottom	Drops downward and the opacity of the toolbar gradually decreases as its moving further down the page.
DropOutToLeft	Drops out toward the left of the parent toolbar and moves toward the left page. The toolbar’s opacity gradually lessens as it moves further to the left of the page.