Menu

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

Transitions

Scale

An element can scale into or out of view

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

Zoom

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

Static animation class names can be added without the need of setting them via javascript.
CSS only transition
CSS only transition

Pulsating

An element can have pulsating edges. This works best on circular or square elements.

When pulsating is used on colorable elements like button or label, the pulsating color adopts its element color

Label
8
Button

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

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

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
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
destroy Destroys instance and removes all events

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 false 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
failSafeDelay 100 Delay in ms for fail safe
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
skipInlineHidden false Whether initially inline hidden objects should be skipped for transition. Useful, if you do the transition for child objects also, but want to have inline hidden children (defined by style="display:none;") still kept hidden while the parent gets animated. Accordion uses this.

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. Returning false from this callback will cancel the transition from showing.
onBeforeShow(showFunction) transitioned element Callback right before the show transition should start. The showFunction parameter has to be called inside the callback to trigger the transition show
onVisible transitioned element Callback once the show transition has finished.
onHide transitioned element Callback on each transition that changes visibility to hidden. Returning false from this callback will cancel the transition from hiding.
onBeforeHide(hideFunction) transitioned element Callback right before the hide transition should start. The hideFunction parameter has to be called inside the callback to trigger the transition hide
onHidden transitioned element Callback once the transition hide has finished.
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 false 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', support : 'This browser does not support CSS animations' }

Dimmer Message
Dimmer sub-header