ComponentOne TreeView for ASP.NET: TreeView Behavior > Animation > Expand and Collapse Transitions

Expand and Collapse Transitions

You can enhance your treeview’s appeal by adding transition effects between the expand or collapse animated states to create a seamless flow between these states. C1TreeView includes thirty-one transition effects that enable you to make the transitions in the collapse or expand animations more visually compelling. Instead of expanding treeview items unfolding and collapsing treeview items folding, the expanding treeview items or collapsing treeview items might bounce in as they are unfolding and bounce out as they are folding. These transitions are special effects that occur when a treeview expands or collapses or stops expanding and collapsing, whereas the animation effects occur while the treeview is expanding and collapsing. To use a transition effect, the CollapseAnimation or ExpandAnimation property must be set to an animation type before you set the CollapseEasing or ExpandEasing properties. By default the CollapseEasing or ExpandEasing properties are set to EaseLinear and the Treeview expands or collapses with a smooth linear transition effect.

The following transitions effects are available for you to animate the transition between states so it looks smooth to help keep the user oriented while menus are expanding or collapsing:

 

Transition Name

Transition Description

EaseLinear(default)

Linear easing. Moves smoothly from start to end without acceleration or deceleration

EaseOutElastic

Elastic easing out. Begins quickly and then decelerates.

EaseInElastic

Elastic easing in. Begins slowly and then accelerates.

EaseInOutElastic

Elastic easing in and out. Begins slowly, accelerates halfway, and then decelerates.

EastOutBounce

Bouncing easing out. Begins quickly and then decelerates. The number of bounces is related to the duration: longer durations produce more bounces.

EaseInBounce

Bouncing easing in. Begins slowly and then accelerates. The number of bounces is related to the duration: longer durations produce more bounces.

EaseInOutBounce

Bouncing easing in and out. Begins slowly, accelerates until halfway, and then decelerates.

EaseOutExpo

Exponential easing out. Begins quickly and then decelerates.

EaseInExpo

Exponential easing in. Begins slowly and then accelerates.

EaseInOutExpo

Exponential easing in and out. Begins slowly, accelerates until halfway, and then decelerates.

EaseOutQuad

Quadratic easing out. Begins at full velocity then decelerates to zero.

EaseInQuad

Quadratic easing in. Begins at zero velocity then slowly accelerates.

EaseInOutQuad

Quadratic easing in and out. Begins slowly, accelerates until halfway, and then decelerates to zero velocity again.

EaseOutSine

Sinusoidal easing out. Begins quickly and then decelerates.

EaseInSine

Sinusoidal easing in. Begins slowly and then accelerates.

EaseInOutSine

Sinusoidal easing in and out. Begins slowly, accelerates until halfway, and then decelerates.

EaseInOutCirc

Circular easing in and out. Begins slowly, accelerates until halfway, and then decelerates.

EaseOutCirc

Circular easing out. Begins quickly and then decelerates.

EaseInCirc

Circular easing in. Begins slowly and then accelerates.

EaseInOutCubic

Cubic easing in and out. Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again.

EaseInCubic

Cubic easing in. Begins at zero velocity and then accelerates.

EaseOutCubic

Cubic easing in and out. Begins at full velocity and then decelerates to zero.

EaseInQuint

Quintic easing in. Begins at zero speed then accelerates.

EaseInOutQuint

Quintic easing in and out. Begins at zero speed, accelerates until halfway, and then decelerates to zero

EaseOutQuint

Quintic easing out. Begins at full velocity and then decelerates to zero.

EaseOutBack

Back easing out. Begins quickly and then decelerates.

EaseInBack

Back easing in. Begins slowly and then accelerates.

EaseInOutBack

Back easing in and out. Begins slowly, accelerates until halfway, and then decelerates.

EaseOutQuart

Quartic easing out. Begins quickly and then decelerates.

EaseInQuart

Quartic easing in. Begins slowly and then accelerates.

EaseInOutQuart

Quartic easing in and out. Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again.


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.