chicago
Version:
A front-end JavaScript library for user-interface developers.
121 lines (115 loc) • 3.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chicago Test</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main">
<header class="header">
<h1>#Chicago.events.animation</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>_c.events.animation</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-6-12">
<div class="panel panel-box">
<legend>
<div class="flex flex-middle flex-space-between padding-bottom">
<div class="col">Example:</div>
<div class="col">
<button class="button button-primary" id="trigger">Trigger Animation</button>
</div>
</div>
</legend>
<div class="preview">
<div class="box box-animate"></div>
</div>
</div>
</div>
<div class="col-6-12">
<div class="panel panel-box">
<legend>Output:</legend>
<h4>Start</h4>
<table class="start">
<thead>
<tr>
<th>`@-keyframe` Rule Name:</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h4>Iteration</h4>
<table class="iteration">
<thead>
<tr>
<th style="width:50%">`@-keyframe` Rule Name:</th>
<th style="width:50%">Iteration Count:</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h4>Complete</h4>
<table class="complete">
<thead>
<tr>
<th style="width:50%">`@-keyframe` Rule Name:</th>
<th style="width:50%">Elapsed Time:</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</article>
</div>
<script src="js/jquery.js"></script>
<script src="../../dist/Chicago.js"></script>
<script>
;(function(_c, $, window, document) {
_c.$('.box').on('animation', {
start : function( name ) {
var html = [
'<tr data-start="' + name + '">',
'<td><em>' + name + '</em></td>',
'</tr>',
];
_c.$('.start tbody').append( html.join('') );
},
iteration : function( name, iterationCount ) {
var html = [
'<tr data-iteration="' + name + '">',
'<td><em>' + name + '</em></td>',
'<td>' + iterationCount + '</td>',
'</tr>',
];
_c.$('.iteration tbody').append( html.join('') );
},
complete : function( name, elapsedTime ) {
var html = [
'<tr data-complete="' + name + '">',
'<td><em>' + name + '</em></td>',
'<td>' + elapsedTime + '</td>',
'</tr>',
];
_c.$('.complete tbody').append( html.join('') );
_c.$('.box').removeClass('active');
}
}, function(evt) {
console.log(evt);
});
_c.$('#trigger').on('click', function() {
_c.$('table tbody').html('');
_c.$('.box').addClass('active');
});
})(Chicago, jQuery, window, document);
</script>
</body>
</html>