Browse Source

adds more examples

pull/13/head
Jack Lukic 11 years ago
parent
commit
442e8b2f05
1 changed files with 41 additions and 7 deletions
  1. 48
      node/src/documents/modules/transition.html

48
node/src/documents/modules/transition.html

@ -107,36 +107,70 @@ type : 'UI Module'
<div class="example"> <div class="example">
<h4 class="ui header">Flash</h4> <h4 class="ui header">Flash</h4>
<p>An element can flash to draw attention to itself</p> <p>An element can flash to draw attention to itself</p>
<div class="code" data-demo="true">
$('.dog.image')
.transition('flash')
;
</div>
</div> </div>
<div class="example"> <div class="example">
<h4 class="ui header">Shake</h4> <h4 class="ui header">Shake</h4>
<p>An element can shake to draw attention to its position</p> <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>
<div class="example"> <div class="example">
<h4 class="ui header">Tada</h4> <h4 class="ui header">Tada</h4>
<p>An element can give user positive feedback for an action</p> <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>
<div class="example"> <div class="example">
<h4 class="ui header">Bounce</h4> <h4 class="ui header">Bounce</h4>
<p>An element can bounce to politely remind you of itself</p> <p>An element can bounce to politely remind you of itself</p>
<div class="code" data-demo="true">
$('.dog.image')
.transition('bounce')
;
</div>
</div> </div>
<h3>Appearance</h3> <h3>Appearance</h3>
<div class="example"> <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>
<div class="example"> <div class="example">
<h4 class="ui header">Fade</h4> <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>
<div class="example"> <div class="example">
<h4 class="ui header">Scale</h4> <h4 class="ui header">Scale</h4>
<p>An element can scale into or out of view</p> <p>An element can scale into or out of view</p>
<div class="code" data-demo="true">
$('.dog.image')
.transition('scale')
;
</div>
</div> </div>
<h2 class="ui dividing header">Behavior</h2> <h2 class="ui dividing header">Behavior</h2>

Loading…
Cancel
Save