You can enhance your menu’s appeal by adding transition effects between expand or collapse animated states to create a seamless flow between these states. C1Menu includes thirty-one transition effects that enable you to make the transitions in the collapse or expand animations more visually compelling. Instead of expanding menu items unfolding and collapsing menu items folding, the expanding menu items or collapsing menu items might bounce in as they are unfolding and bounce out as they are folding. These transitions are special effects that occur when a menu expands or collapses or stops expanding and collapsing, whereas the animation effects occur while the menu 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 menu 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. |
|
