Expand and Collapse Animation Effects

ComponentOne TreeView for ASP.NET: TreeView 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 nodes expand or collapse. For each expand or collapse effect you can specify how long the animation lasts by specifying an integer value for the ExpandDuration and CollapseDuration properties. The duration is measure in milliseconds. By default, the treeview items expand and collapse without an animation effect.

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

The following table lists and defines each animation effect:

Animation Name	Animation Description
None(Default)	Disables animation behavior for the expanding or collapsing treeview 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 treeview to the right end of the treeview.
ScrollOutToTop	Scrolls out of view from the bottom to the top of the treeview.
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 menu.
Fold	Folds the treeview.
UnFold	Unfolds the treeview.
OpenVertically	Opens the treeview vertically from the center of the treeview.
CloseVertically	Closes the treeview vertically from the center of the menu.
OpenHorizontally	Opens the treeview horizontally from left to right.
CloseHorizontally	Closes the treeview horizonally from right to left.
Shake	Moves the treeview back and fourth from left to right.
Bounce	Moves the treeview nodes up and down.
DropInFromTop	The treeview nodes start moving upward from its default location to near the top of the page. The treeview node’s opacity decreases as it moves further upward away from its default location.
DropInFromRight	The treeview nodes appear to the far left side of the treeview control and move toward the right and stop once it reaches its default location (the location of its associated parent treeview item). The moving treeview node’s opacity increases as it moves closer to its default location.
DropInFromBottom	Drops downward with the bottom of the treeview items appearing first. The treeview’s opacity increases as it moves down to meet with its associated parent treeview item.
DropInFromLeft	The treeview nodes appear to the far right side of the treeview control and move toward the left and stop once it reaches its default location (the location of its associated parent treeview item). The moving treeview node’s opacity increases as it moves closer to its default location.
DropOutToTop	Moves upward from bottom to the top of the treeview and gradually fades out as it’s moving upward.
DropOutToRight	Moves to the right of the parent treeview item and gradually fades as it’s moving to the right.
DropOutToBottom	Drops downward and the opacity of the treeview gradually decreases as its moving further down the page.
DropOutToLeft	Drops out toward the left of the parent treeview and moves toward the left page. The treeview’s opacity gradually lessens as it moves further to the left of the page.