brite
Version:
DOM Centric Minimalistic MVC Framework
95 lines (82 loc) • 2.49 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html, charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>
<title>brite - test - btransitionend</title>
<!-- ****** Generic Test Includes ****** -->
<link rel="stylesheet" href="css/test.css"/>
<link rel="stylesheet" href="../others/bootstrap/css/bootstrap.css" />
<!-- only brite.js dependency -->
<script type="text/javascript" src="../js-dependencies/jquery.js" ></script>
<!-- include the brite.min.js in prod -->
<script type="text/javascript" src="../dist/brite.js" ></script>
<!-- some test utilities -->
<script type="text/javascript" src="../others/handlebars.min.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<!-- ****** /Generic Test Includes ****** -->
<style>
.demoCtn{
position: relative;
width: 650px;
height: 400px;
border: dotted 1px #888;
}
#box1{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: solid 1px #ddd;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#box1.moved{
top: 200px;
left: 200px;
}
#box1 h2{
font-size: 14px;
text-align: center;
border: none;
}
#box1 p{
font-size: 12px;
font-style: monospace;
color: #777;
padding: 5px;
}
</style>
</head>
<body>
<h2>btransitionend</h2>
<div class="sTestSrc sTestShowSrc">
<div class='demoCtn'>
<div id="box1">
<h2>Box 1</h2>
<p></p>
</div>
</div>
<script type="text/javascript">
$( function() {
var count = 1;
var $box1 = $("#box1");
$box1.on("btransitionend",function(){
if ($box1.hasClass("moved")){
$box1.find("p").text("btransitionend: " + count++);
$box1.removeClass("moved");
}
});
$box1.on("btap",function(){
$box1.addClass("moved");
});
$box1.addClass("moved");
});
</script>
</div>
</body>
</html>