lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add docs for grouped transition

1.x
jlukic 10 years ago
parent
412f68c610
commit
5df12d585a
4 changed files with 216 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      server/documents/collections/message.html.eco
  2. 8
      server/documents/elements/image.html.eco
  3. 189
      server/documents/hotfix.html.eco
  4. 59
      server/documents/modules/transition.html.eco

4
server/documents/collections/message.html.eco
View File

@ -93,7 +93,7 @@ themes : ['Default', 'GitHub', 'Gmail']
<div class="example">
<h4 class="ui header">Hidden</h4>
<p>Text Blocks can be hidden</p>
<p>A message can be hidden</p>
<div class="existing code">
<div class="ui hidden message">
<p>You can't see me</p>
@ -103,7 +103,7 @@ themes : ['Default', 'GitHub', 'Gmail']
<div class="example">
<h4 class="ui header">Visible</h4>
<p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
<p>A message can be set to visible to force itself to be shown.</p>
<div class="ui visible message">
<p>You can always see me</p>
</div>

8
server/documents/elements/image.html.eco
View File

@ -53,10 +53,16 @@ themes : ['Default']
States
</h2>
<div class="example">
<h4 class="ui header">Hidden</h4>
<p>An image can be hidden</p>
<img class="hidden ui image" src="/images/wireframe/image.png">
</div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>An image can show that it is disabled and cannot be selected</p>
<img class="medium disabled ui image" src="/images/wireframe/image.png">
<img class="disabled medium ui image" src="/images/wireframe/image.png">
</div>
<h2 class="ui dividing header">Variations</h2>

189
server/documents/hotfix.html.eco
View File

@ -9,25 +9,16 @@ type : 'Library'
<!-- TEST JS HERE !-->
<script type="text/javascript">
$(document).ready(function() {
$('.ui.sidebar.first')
.sidebar({
transition: 'overlay',
exclusive: true,
dimPage: false,
closable: false
$('.card')
.transition({
interval: 200,
animation: 'fade'
})
.sidebar('attach events', '.button.open-first-sidebar')
;
$('.ui.sidebar.second')
.sidebar({
transition: 'overlay',
exclusive: true,
dimPage: false,
closable: false
.transition({
interval: 200,
animation: 'scale'
})
.sidebar('attach events', '.button.open-second-sidebar')
;
});
</script>
@ -35,35 +26,145 @@ $(document).ready(function() {
<style type="text/css">
</style>
<body>
<aside class="ui left vertical labeled icon sidebar menu first">
<a class="item">
<i class="home icon"></i>
Sidebar 1
<div style="max-width: 1000px;margin:2em auto;">
<div class="ui cards">
<div class="green card">
<div class="image">
<img src="images/wireframe/image.png" class="visible content">
</div>
<div class="content">
<a class="header">Card 0</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">
<a>
<i class="red clock icon"></i>
Today
</a>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
30+ fans
</span>
</div>
</div>
<div class="green card">
<div class="image">
<img src="images/wireframe/image.png" class="visible content">
</div>
<div class="content">
<a class="header">Card 1</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">
<a>
<i class="red clock icon"></i>
Today
</a>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
30+ fans
</span>
</div>
</div>
<div class="green card">
<div class="image">
<img src="images/wireframe/image.png" class="visible content">
</div>
<div class="content">
<a class="header">Card 2</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">
<a>
<i class="red clock icon"></i>
Today
</a>
<a class="item">
<button class="ui button teal open-second-sidebar">
Open sidebar 2
</button>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
30+ fans
</span>
</div>
</div>
<div class="green card">
<div class="image">
<img src="images/wireframe/image.png" class="visible content">
</div>
<div class="content">
<a class="header">Card 3</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">
<a>
<i class="red clock icon"></i>
Today
</a>
</aside>
<aside class="ui left vertical labeled icon sidebar menu second">
<a class="item">
<i class="home icon"></i>
Sidebar 2
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
30+ fans
</span>
</div>
</div>
<div class="green card">
<div class="image">
<img src="images/wireframe/image.png" class="visible content">
</div>
<div class="content">
<a class="header">Card 4</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">
<a>
<i class="red clock icon"></i>
Today
</a>
<a class="item">
<button class="ui button teal open-first-sidebar">
Open sidebar 1
</button>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
30+ fans
</span>
</div>
</div>
<div class="green card">
<div class="image">
<img src="images/wireframe/image.png" class="visible content">
</div>
<div class="content">
<a class="header">Card 5</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">
<a>
<i class="red clock icon"></i>
Today
</a>
</aside>
<main class="pusher">
<button class="ui button teal open-first-sidebar">
Open sidebar 1
</button>
<button class="ui button teal open-second-sidebar">
Open sidebar 2
</button>
</main>
</body>
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
30+ fans
</span>
</div>
</div>
</div>
</div>

59
server/documents/modules/transition.html.eco
View File

@ -255,6 +255,63 @@ type : 'UI Module'
.transition('scale')
;
</div>
<h2 class="ui dividing header">Grouped Transitions</h2>
<h4 class="ui header">Animation Intervals</h4>
<p>When animating several different items in a group you may want to use an interval so that each item appears consecutively</p>
<div class="code" data-demo="true" data-title="Animation Intervals">
$('.jiggle.images .image')
.transition({
animation : 'jiggle',
duration : 800,
interval : 200
})
;
</div>
<div class="ui small jiggle images">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
</div>
<h4 class="ui header">Animation Order</h4>
<p>When hiding groups of elements, the default setting uses <code>reverse: 'auto'</code>. 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.</p>
<div class="code" data-demo="true" data-title="Reversing Animation Order">
$('.sequenced.images .image')
.transition({
animation : 'scale',
reverse : 'auto', // default setting
interval : 200
})
;
</div>
<div class="ui small sequenced images">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
</div>
<h4 class="ui header">Forcing Order</h4>
<p>If you need to manually force reverse animations regardless of the animation direction, you can use <code>reverse: true</code>.</p>
<div class="code" data-demo="true" data-title="Reversing Animation Order">
// always hide in reverse
$('.reverse.images .image')
.transition({
animation : 'pulse',
reverse : true,
interval : 200
})
;
</div>
<div class="ui small reverse images">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
<img src="/images/wireframe/image.png" class="ui wireframe image">
</div>
<h2 class="ui dividing header">Transition Direction</h2>
@ -493,7 +550,7 @@ type : 'UI Module'
</tr>
<tr>
<td>useFailSafe</td>
<td>false</td>
<td>true</td>
<td>If enabled a <code>timeout</code> will be added to ensure <code>animationend</code> callback occurs even if element is hidden</td>
</tr>
<tr>

Write Preview
Loading…
Cancel
Save