|
|
@ -107,36 +107,70 @@ type : 'UI Module' |
|
|
|
<div class="example"> |
|
|
|
<h4 class="ui header">Flash</h4> |
|
|
|
<p>An element can flash to draw attention to itself</p> |
|
|
|
<div class="code" data-demo="true"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('flash') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="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"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('shake') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="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"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('tada') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="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"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('bounce') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h3>Appearance</h3> |
|
|
|
<div class="example"> |
|
|
|
<h4 class="ui header">Horizontal Flip</h4> |
|
|
|
<p>An element can flip in horizontally into or out of view</p> |
|
|
|
</div> |
|
|
|
<div class="example"> |
|
|
|
<h4 class="ui header">Vertical Flip</h4> |
|
|
|
<p>An element can flip vertically into or out of view</p> |
|
|
|
<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"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('horizontal flip') |
|
|
|
.transition('vertical flip') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="example"> |
|
|
|
<h4 class="ui header">Fade</h4> |
|
|
|
<p>An element can fade into or out of view</p> |
|
|
|
<p>An element can fade into or out of view descending and ascending</p> |
|
|
|
<div class="code" data-demo="true"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('fade') |
|
|
|
.transition('fade up') |
|
|
|
.transition('fade down') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="example"> |
|
|
|
<h4 class="ui header">Scale</h4> |
|
|
|
<p>An element can scale into or out of view</p> |
|
|
|
<div class="code" data-demo="true"> |
|
|
|
$('.dog.image') |
|
|
|
.transition('scale') |
|
|
|
; |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<h2 class="ui dividing header">Behavior</h2> |
|
|
|