formstone
Version:
Library of modular front end components.
226 lines (197 loc) • 8.23 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Transition · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="transition-demo">Transition Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/transition">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.transitions {
margin: 0 0 20px;
}
.transition_track {
background: #fff;
border: 1px solid #455a64;
margin: 20px 0;
}
.transition {
background-color: #00bcd4;
height: 30px;
width: 10%;
-webkit-transition: margin 0.5s ease, height 0.5s linear 0.5s;
transition: margin 0.5s ease, height 0.5s linear 0.5s;
}
.transition.move {
margin-left: 90%;
}
.transition_property.move {
height: 50px;
}
.output {
display: inline-block;
margin: 0 0 0 10px;
}
</style>
<script>
Formstone.Ready(function() {
$(".transition_basic").transition({
always: true
}, complete);
$(".transition_parent").transition({
always: true,
target: ".transition_delegate"
}, complete);
$(".transition_property").transition({
always: true,
property: "height"
}, complete);
$(".trigger").on("click", start);
});
function start() {
var $target = $(this).parent(".transitions").find(".transition");
if (!$target.hasClass("animating")) {
$target.toggleClass("move")
.addClass("animating");
output($target, " ");
}
}
function complete() {
var $target = $(this);
if (!$target.hasClass("transition")) {
$target = $(this).find(".transition");
}
$target.removeClass("animating");
output($target, "Complete");
}
function output($target, text) {
$target.parents(".transitions").find(".output").text(text);
}
</script>
<div class="demo_container">
<div class="demo_example">
<div class="transitions">
<div class="transition_track">
<div class="transition transition_basic"></div>
</div>
<button class="button trigger">Start</button>
<div class="output"> </div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="transition_target"></div></code></pre>
<pre><code class="language-javascript">$(".transition_target").transition({
always: true
}, function() {
// Tranition complete...
}).addClass("active");</code></pre>
<pre><code class="language-css">.transition_target {
background: black;
transition: background 0.25s;
}
.transition_target.active {
background: blue;
}</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Delegation</h4>
<div class="demo_container">
<div class="demo_example">
<div class="transitions">
<div class="transition_track transition_parent">
<div class="transition transition_delegate"></div>
</div>
<button class="button trigger">Start</button>
<div class="output"> </div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="transition_target">
	<div class="transition_child"></div>
</div></code></pre>
<pre><code class="language-javascript">$(".transition_target").transition({
always: true,
target: ".transition_child"
}, function() {
// Tranition complete...
}).addClass("active");</code></pre>
<pre><code class="language-css">.transition_target .transition_child {
background: black;
transition: background 0.25s;
}
.transition_target.active .transition_child {
background: blue;
}</code></pre>
</div>
</div>
<h4>Property</h4>
<div class="demo_container">
<div class="demo_example">
<div class="transitions">
<div class="transition_track">
<div class="transition transition_property"></div>
</div>
<button class="button trigger">Start</button>
<div class="output"> </div>
</div>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="transition_target"></div></code></pre>
<pre><code class="language-javascript">$(".transition_target").transition({
always: true,
property: "height"
}, function() {
// Tranition complete...
}).addClass("active");</code></pre>
<pre><code class="language-css">.transition_target {
background: black;
height: 10px;
transition:
background 0.25s linear 0s,
height 0.25s linear 1s;
}
.transition_target.active {
background: blue;
height: 30px;
}</code></pre>
</div>
</div>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>