Browse Source

Update transition

1.x
jlukic 10 years ago
parent
commit
bae61a2675
  1. 14
      server/documents/modules/transition.html.eco

14
server/documents/modules/transition.html.eco

@ -244,14 +244,14 @@ type : 'UI Module'
<div class="ui tab" data-tab="examples">
<div class="fixed column">
<div class="ui sticky">
<img src="/images/avatar/large/veronika.jpg" class="ui user image">
<img src="/images/leaves/5.png" class="ui long leaf image">
</div>
</div>
<div class="examples">
<h2 class="ui dividing header">Visibility</h2>
<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-type="javascript" data-demo="true" data-title="Disapearing element">
$('.user.image')
$('.long.leaf.image')
.transition('scale')
;
</div>
@ -261,7 +261,7 @@ type : 'UI Module'
<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">
$('.user.image')
$('.long.leaf.image')
// fade up out is used if available
.transition('fade up')
// this is now fade up in
@ -269,7 +269,7 @@ type : 'UI Module'
;
</div>
<div class="code" data-demo="true" data-title="Specifying a direction">
$('.user.image')
$('.long.leaf.image')
// if a direction if specified it will be obeyed
.transition('horizontal flip in')
.transition('vertical flip in')
@ -334,7 +334,7 @@ type : 'UI Module'
<h2 class="ui dividing header">Static Animations</h2>
<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">
$('.user.image')
$('.long.leaf.image')
.transition('pulse')
;
</div>
@ -342,13 +342,13 @@ type : 'UI Module'
<h2 class="ui dividing header">Looping</h2>
<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">
$('.user.image')
$('.long.leaf.image')
.transition('set looping')
.transition('bounce', '2000ms')
;
</div>
<div class="code" data-demo="true" data-title="Ending looping">
$('.user.image')
$('.long.leaf.image')
.transition('remove looping')
;
</div>

Loading…
Cancel
Save