You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
476 lines
15 KiB
476 lines
15 KiB
---
|
|
layout : 'default'
|
|
css : 'transition'
|
|
|
|
title : 'Transition'
|
|
description : 'A transition is an animation usually used to move content in or out of view'
|
|
type : 'UI Module'
|
|
---
|
|
|
|
<%- @partial('header', { tabs: 'module' }) %>
|
|
|
|
<div class="main container">
|
|
|
|
<div class="ui active tab" data-tab="definition">
|
|
<div class="fixed column">
|
|
<img src="/images/cat2.png" class="ui cat image">
|
|
</div>
|
|
<div class="examples">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<h3>Emphasis</h3>
|
|
<div class="no example">
|
|
<h4 class="ui header">Flash</h4>
|
|
<p>An element can flash to draw attention to itself</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('flash')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Shake</h4>
|
|
<p>An element can shake to draw attention to its position</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('shake')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Pulse</h4>
|
|
<p>An element can pulse to draw attention to its visibility</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('pulse')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Tada</h4>
|
|
<p>An element can give user positive feedback for an action</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('tada')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Bounce</h4>
|
|
<p>An element can bounce to politely remind you of itself</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('bounce')
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Appearance</h3>
|
|
<div class="no example">
|
|
<h4 class="ui header">Flip</h4>
|
|
<p>An element can flip into or out of view vertically or horizontally</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('horizontal flip')
|
|
;
|
|
</div>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('vertical flip')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Fade</h4>
|
|
<p>An element can fade into or out of view descending and ascending</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('fade')
|
|
;
|
|
</div>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('fade up')
|
|
;
|
|
</div>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('fade down')
|
|
;
|
|
</div>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">Scale</h4>
|
|
<p>An element can scale into or out of view</p>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('scale')
|
|
;
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no example">
|
|
<h4 class="ui header">Slide</h4>
|
|
<p>An element can appear to slide in from above or below
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('slide down')
|
|
;
|
|
</div>
|
|
<div class="code" data-demo="true">
|
|
$('.cat.image')
|
|
.transition('slide up')
|
|
;
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui tab" data-tab="usage">
|
|
<div class="fixed column">
|
|
<img src="/images/dog.png" class="ui dog image">
|
|
</div>
|
|
<div class="examples">
|
|
<h2 class="ui dividing header">Introduction</h2>
|
|
|
|
<p>UI Transitions provide a wrapper for using css transitions in javascript providing cross-browser callbacks, advanced queuing, and feature detection.</p>
|
|
<p>Transitions are loosely coupled with other ui modules like <a href="/modules/dropdown.html">dropdowns</a> and <a href="/modules/modal.html">modals</a> to provide element transitions</p>
|
|
|
|
<h3 class="ui header">Types</h3>
|
|
<p>Transitions are separated into three categories. <b>Inward transitions</b>, <b>outward transitions</b>, and <b>static transitions</b>. These three categories determine the visibility of the element after the animation completes.</p>
|
|
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
|
|
<h3 class="ui header">Initializing</h3>
|
|
|
|
<p>If a transition is called without any arguments all default settings will be used.</p>
|
|
|
|
<div class="code" data-demo="true" data-title="Initializing a transition">
|
|
$('.dog.image')
|
|
// default everything
|
|
.transition()
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Passing in settings</h3>
|
|
<p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>. 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.</p>
|
|
<div class="code" data-demo="true" data-title="Settings objects">
|
|
$('.dog.image')
|
|
.transition({
|
|
animation : 'scale',
|
|
duration : '2s',
|
|
complete : function() {
|
|
alert('done');
|
|
}
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Queuing animations</h3>
|
|
|
|
<p>Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.</p>
|
|
<div class="code" data-demo="true" data-title="Queueing animations">
|
|
$('.dog.image')
|
|
.transition('horizontal flip', '500ms')
|
|
.transition('horizontal flip', 500, function() {
|
|
alert('done!');
|
|
})
|
|
;
|
|
</div>
|
|
<h2 class="ui dividing header">Behavior</h2>
|
|
|
|
<p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
|
|
<div class="code">
|
|
$('.your.element')
|
|
.dropdown('behavior name', argumentOne, argumentTwo)
|
|
;
|
|
</div>
|
|
|
|
<table class="ui definition sortable celled table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Behavior</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>repaint</td>
|
|
<td>Triggers reflow on element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>looping</td>
|
|
<td>Enables animation looping</td>
|
|
</tr>
|
|
<tr>
|
|
<td>remove looping</td>
|
|
<td>Removes looping state from element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>stop</td>
|
|
<td>Stops current transition</td>
|
|
</tr>
|
|
<tr>
|
|
<td>start</td>
|
|
<td>Restarts a stopped transition</td>
|
|
</tr>
|
|
<tr>
|
|
<td>toggle</td>
|
|
<td>Toggles current transition on/off</td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration(duration)</td>
|
|
<td>Modifies element animation duration</td>
|
|
</tr>
|
|
<tr>
|
|
<td>save conditions</td>
|
|
<td>Saves all class names and styles to cache to be retrieved after animation</td>
|
|
</tr>
|
|
<tr>
|
|
<td>restore conditions</td>
|
|
<td>Adds back cached names and styles to element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get animation name</td>
|
|
<td>Returns vendor prefixed animation property for animationname</td>
|
|
</tr>
|
|
<tr>
|
|
<td>get animation event</td>
|
|
<td>Returns vendor prefixed animation property for animationend</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is animating</td>
|
|
<td>Returns whether transition is currently occurring</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is looping</td>
|
|
<td>Returns whether animation looping is set</td>
|
|
</tr>
|
|
<tr>
|
|
<td>is visible</td>
|
|
<td>Returns whether element is visible</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="examples">
|
|
<div class="fixed column">
|
|
<img src="/images/cat.png" class="ui kitten image">
|
|
</div>
|
|
<div class="examples">
|
|
<h3 class="ui header">Visibility</h3>
|
|
<p>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.</p>
|
|
<div class="code" data-demo="true" data-title="Disapearing element">
|
|
$('.kitten.image')
|
|
.transition('scale')
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Transition Direction</h3>
|
|
|
|
<p>If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".</p>
|
|
|
|
<div class="code" data-demo="true" data-title="Automatically choosing direction">
|
|
$('.kitten.image')
|
|
// fade up out is used if available
|
|
.transition('fade up')
|
|
// this is now fade up in
|
|
.transition('fade up')
|
|
;
|
|
</div>
|
|
<div class="code" data-demo="true" data-title="Specifying a direction">
|
|
$('.kitten.image')
|
|
// if a direction if specified it will be obeyed
|
|
.transition('horizontal flip in')
|
|
.transition('vertical flip in')
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Static Animations</h3>
|
|
<p>Animations that do not have an in or out animation defined, will maintain their current visibility after running</p>
|
|
<div class="code" data-demo="true" data-title="Static transitions">
|
|
$('.kitten.image')
|
|
.transition('pulse')
|
|
;
|
|
</div>
|
|
|
|
<h3 class="ui header">Looping</h3>
|
|
<p>Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle</p>
|
|
<div class="code" data-demo="true" data-title="Starting looping">
|
|
$('.kitten.image')
|
|
.transition('set looping')
|
|
.transition('bounce', '2000ms')
|
|
;
|
|
</div>
|
|
<div class="ui warning message">There is currently a bug in WebKit that makes it impossible to force css looping animations to end programatically</div>
|
|
<div class="code" data-demo="true" data-title="Ending looping">
|
|
$('.kitten.image')
|
|
.transition('remove looping')
|
|
;
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui tab" data-tab="settings">
|
|
|
|
<h3 class="ui header">
|
|
Transition Settings
|
|
<div class="sub header">Form settings modify the transition behavior</div>
|
|
</h3>
|
|
<table class="ui red celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>animation</td>
|
|
<td>fade</td>
|
|
<td>Named animation event to used. Must be defined in css.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>duration</td>
|
|
<td>700ms</td>
|
|
<td>Duration of the css transition animation</td>
|
|
</tr>
|
|
<tr>
|
|
<td>queue</td>
|
|
<td>true</td>
|
|
<td>Whether to automatically queue animation if another is occurring</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ui horizontal divider"><i class="icon setting"></i></div>
|
|
|
|
<h3 class="ui header">
|
|
Callbacks
|
|
<div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
|
|
</h3>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th class="four wide">Setting</th>
|
|
<th>Context</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onShow</td>
|
|
<td>transitioned element</td>
|
|
<td>Callback on each transition that changes visibility to shown</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onHide</td>
|
|
<td>transitioned element</td>
|
|
<td>Callback on each transition that changes visibility to hidden</td>
|
|
</tr>
|
|
<tr>
|
|
<td>complete</td>
|
|
<td>transitioned element</td>
|
|
<td>Callback on each transition complete</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ui horizontal divider"><i class="icon setting"></i></div>
|
|
|
|
<h3 class="ui header">
|
|
DOM Settings
|
|
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
|
|
</h3>
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th class="six wide">Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>namespace</td>
|
|
<td>transition</td>
|
|
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>
|
|
<div class="code">
|
|
className : {
|
|
animating : 'animating',
|
|
disabled : 'disabled',
|
|
hidden : 'hidden',
|
|
inward : 'in',
|
|
loading : 'loading',
|
|
looping : 'looping',
|
|
outward : 'out',
|
|
transition : 'ui transition',
|
|
visible : 'visible'
|
|
}
|
|
</div>
|
|
</td>
|
|
<td>Class names used to attach style to state</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ui horizontal divider"><i class="icon setting"></i></div>
|
|
|
|
<h3 class="ui header">
|
|
Debug Settings
|
|
<div class="sub header">Debug settings controls debug output to the console</div>
|
|
</h3>
|
|
|
|
<table class="ui celled sortable definition table segment">
|
|
<thead>
|
|
<tr>
|
|
<th>Setting</th>
|
|
<th class="four wide">Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>name</td>
|
|
<td>Transition</td>
|
|
<td>Name used in debug logs</td>
|
|
</tr>
|
|
<tr>
|
|
<td>debug</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>performance</td>
|
|
<td>True</td>
|
|
<td>Provides standard debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>verbose</td>
|
|
<td>True</td>
|
|
<td>Provides ancillary debug output to console</td>
|
|
</tr>
|
|
<tr>
|
|
<td>errors</td>
|
|
<td colspan="2">
|
|
<div class="code">
|
|
errors : {
|
|
noAnimation : 'There is no css animation matching the one you specified.',
|
|
method : 'The method you called is not defined'
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|