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.
73 lines
2.1 KiB
73 lines
2.1 KiB
---
|
|
layout : 'default'
|
|
css : 'transition'
|
|
|
|
title : 'Transition'
|
|
type : 'UI Module'
|
|
---
|
|
|
|
<script src="/components/semantic/modules/transition.js"></script>
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/transition.css">
|
|
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/magic.transition.css">
|
|
<script src="/javascript/transition.js"></script>
|
|
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1 class="ui dividing header">Transition</h1>
|
|
<p>A transition is an animation to move content in or out of view</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Introduction</a>
|
|
<a class="item">Variations</a>
|
|
<a class="item">Behavior</a>
|
|
<a class="item">Usage</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Introduction</h2>
|
|
|
|
<p>UI Transitions provide a wrapper for using css transitions in javascript without having to manually manage class names and state.</p>
|
|
<h2 class="ui dividing header">Usage</h2>
|
|
|
|
<h3 class="ui header">Using transition</h3>
|
|
<p>Transitions use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>.</p>
|
|
|
|
<div class="code" data-demo="true" data-title="Arguments in transition">
|
|
$('.dog.image')
|
|
// default everything
|
|
.transition()
|
|
// ok ill specify an animation
|
|
.transition('fade in')
|
|
// no that was way too quick
|
|
.transition('fade out', '2s')
|
|
.transition('fade in', function() {
|
|
window.alert('Aha you sat through them all!');
|
|
})
|
|
;
|
|
</div>
|
|
|
|
<p>A transition can be called multiple times to create an animation queue.</p>
|
|
<div class="code" data-demo="true" data-title="Queueing animations">
|
|
$('.dog.image')
|
|
.transition('flip out y', '500ms')
|
|
.transition('flip in y', '500ms', function() {
|
|
console.log('done!');
|
|
})
|
|
;
|
|
</div>
|
|
<img src="/images/demo/vector.png" class="ui medium dog image">
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
|
|
|
|
<h2 class="ui dividing header">Behavior</h2>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|