Menu

Transition
A transition is an animation usually used to move content in or out of view

Download

Transitions

Scale

An element can scale into or out of view

$('.autumn.leaf') .transition('scale') ;

Zoom
New in 2.3

An element can zoom into view from far away

$('.autumn.leaf') .transition('zoom') ;

Fade

An element can fade into or out of view descending and ascending

$('.autumn.leaf') .transition('fade') ;
$('.autumn.leaf') .transition('fade up') ;
$('.autumn.leaf') .transition('fade down') ;
$('.autumn.leaf') .transition('fade left') ;
$('.autumn.leaf') .transition('fade right') ;

Flip

An element can flip into or out of view vertically or horizontally

$('.autumn.leaf') .transition('horizontal flip') ;
$('.autumn.leaf') .transition('vertical flip') ;

Drop

An element can drop into view from above

$('.autumn.leaf') .transition('drop') ;

Fly

An element can fly in from off canvas

$('.autumn.leaf') .transition('fly left') ;
$('.autumn.leaf') .transition('fly right') ;
$('.autumn.leaf') .transition('fly up') ;
$('.autumn.leaf') .transition('fly down') ;

Swing

An element can swing into view

$('.autumn.leaf') .transition('swing left') ;
$('.autumn.leaf') .transition('swing right') ;
$('.autumn.leaf') .transition('swing up') ;
$('.autumn.leaf') .transition('swing down') ;

Browse

An element can appear and disappear as part of a series

$('.autumn.leaf') .transition('browse') ;
$('.autumn.leaf') .transition('browse right') ;

Slide

An element can appear to slide in from above or below

$('.autumn.leaf') .transition('slide down') ;
$('.autumn.leaf') .transition('slide up') ;
$('.autumn.leaf') .transition('slide left') ;
$('.autumn.leaf') .transition('slide right') ;

Static Animations

Jiggle

An element can jiggle to draw attention to its shape

$('.autumn.leaf') .transition('jiggle') ;

Flash

An element can flash to draw attention to itself

$('.autumn.leaf') .transition('flash') ;

Shake

An element can shake to draw attention to its position

$('.autumn.leaf') .transition('shake') ;

Pulse

An element can pulse to draw attention to its visibility

$('.autumn.leaf') .transition('pulse') ;

Tada

An element can give user positive feedback for an action

$('.autumn.leaf') .transition('tada') ;

Bounce

An element can bounce to politely remind you of itself

$('.autumn.leaf') .transition('bounce') ;

Glow
New in 2.3

An element can glow to show its position in a page.

$('.autumn.leaf') .transition('glow') ;

Visibility

After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.

$('.long.leaf.image') .transition('scale') ;

Specifying a direction

To force an animation direction, add either in or out to the animation name.

$('.long.leaf.image') // if a direction if specified it will be obeyed .transition('horizontal flip in') .transition('vertical flip in') ;

Automatic Direction

If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".

$('.long.leaf.image') // fade up out is used if available .transition('fade up') // this is now fade up in .transition('fade up') ;

Grouped Transitions

Animation Intervals

When animating several different items in a group you may want to use an interval so that each item appears consecutively

$('.jiggle.images .image') .transition({ animation : 'jiggle', duration : 800, interval : 200 }) ;

Animation Order

When hiding groups of elements, the default setting uses reverse: 'auto'. This will automatically reverse the order of animations from back-to-front when hiding elements to avoid layout reflows. When showing elements the order will return to its normal sequence.

$('.sequenced.images .image') .transition({ animation : 'scale', reverse : 'auto', // default setting interval : 200 }) ;

Forcing Order

If you need to manually force reverse animations regardless of the animation direction, you can use reverse: true.

$('.reverse.images .image') .transition({ animation : 'pulse', reverse : true, interval : 200 }) ;

Static Animations

Animations that do not have an in or out animation defined, will maintain their current visibility after running

$('.long.leaf.image') .transition('pulse') ;

Looping

Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle

$('.long.leaf.image') .transition('set looping') .transition('bounce', '2000ms') ;
$('.long.leaf.image') .transition('remove looping') ;

Introduction

UI Transitions provide a wrapper for using CSS transitions in Javascript providing cross-browser callbacks, advanced queuing, and feature detection.

Transitions are loosely coupled with other ui modules like dropdowns and modals to provide element transitions

Types

Transitions are separated into three categories. Inward transitions, outward transitions, and static transitions. These three categories determine the visibility of the element after the animation completes.

Usage

Initializing

If a transition is called without any arguments all default settings will be used.

$('.green.leaf') // default everything .transition() ;

Passing in settings

Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with CSS shorthand, or with numbers.

$('.green.leaf') .transition({ animation : 'scale', duration : '2s', onComplete : function() { alert('done'); } }) ;

Display Type

Animations can be used on any display type not just block level elements. For example you can animate a button while preserving its inline-block status.

$('.test.button') .transition('horizontal flip', '500ms') ;
Sign-up

Queuing animations

Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.

$('.green.leaf') .transition('horizontal flip', '500ms') .transition('horizontal flip', 500, function() { alert('done!'); }) ;

Stopping Animations

Animations can be stopped using three methods. stop will end the current animation, stop all will end animation and remove queued animations, and clear queue will continue the current playback but remove queued animations.

// only first horizontal flip cancelled $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop') .transition('vertical flip') ;
// all horizontal flip cancelled $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('horizontal flip') .transition('stop all') .transition('vertical flip') ;
// all queued animations cancelled $('.green.leaf') .transition('horizontal flip') .transition('horizontal flip') .transition('vertical flip') .transition('clear queue') ;

Hide/Show Without Transition

You can use transitions show and hide behavior to hide content without animation. This will preserve the display type, like flex or table-cell of an element just like animations.

Transition only use inline styles when an element's final display state is not block, or when an element cannot be hidden without an inline override.
$('.demo.table tr:last-child') .transition('toggle') ;
$('.demo.table td:last-child') .transition('hide') ;
John Lilki jhlilk22@yahoo.com No
Jamie Harington jamieharingonton@yahoo.com Yes
Jill Lewis jilsewris22@yahoo.com Yes

Behavior

All the following behaviors can be called using the syntax:

$('.your.element') .transition('behavior name', argumentOne, argumentTwo) ;
Behavior Description
stop Stop current animation and preserve queue
stop all Stop current animation and queued animations
clear queue Clears all queued animations
show Stop current animation and show element
hide Stop current animation and hide element
toggle Toggles between hide and show
force repaint Forces reflow using a more expensive but stable method
repaint Triggers reflow on element
reset Resets all conditions changes during transition
looping Enables animation looping
remove looping Removes looping state from element
disable Adds disabled state (stops ability to animate)
enable Removes disabled state
set duration(duration) Modifies element animation duration
save conditions Saves all class names and styles to cache to be retrieved after animation
restore conditions Adds back cached names and styles to element
get animation name Returns vendor prefixed animation property for animationname
get animation event Returns vendor prefixed animation property for animationend
is visible Returns whether element is currently visible
is animating Returns whether transition is currently occurring
is looping Returns whether animation looping is set
is supported Returns whether animations are supported

Transition Settings
Form settings modify the transition behavior

Setting Default Description
animation fade Named animation event to used. Must be defined in CSS.
interval 0 Interval in MS between each elements transition
reverse auto When an interval is specified, sets order of animations. auto reverses only animations that are hiding.
displayType false Specify the final display type (block, inline-block etc) so that it doesn't have to be calculated.
duration 500ms Duration of the CSS transition animation
useFailSafe true If enabled a timeout will be added to ensure animationend callback occurs even if element is hidden
allowRepeats false If enabled will allow same animation to be queued while it is already occurring
queue true Whether to automatically queue animation if another is occurring

Callbacks
Callbacks specify a function to occur after a specific behavior.

Setting Context Description
onShow transitioned element Callback on each transition that changes visibility to shown
onHide transitioned element Callback on each transition that changes visibility to hidden
onStart transitioned element Callback on animation start, useful for queued animations
onComplete transitioned element Callback on each transition complete

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace transition Event namespace. Makes sure module teardown does not effect other events attached to an element.
className
className : { animating : 'animating', disabled : 'disabled', hidden : 'hidden', inward : 'in', loading : 'loading', looping : 'looping', outward : 'out', transition : 'transition', visible : 'visible' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Transition Name used in debug logs
silent False Silences all console output including error messages, regardless of other debug settings.
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors
errors : { noAnimation : 'There is no CSS animation matching the one you specified.', method : 'The method you called is not defined' }

Dimmer Message
Dimmer sub-header