<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Abel Muiño Vizcaino">
<style>
body {
background-color: #caa;
}
#widget {
background-color: #ccc;
padding: 10px;
width: 50%;
margin: 0 auto;
position:relative;
border-radius: 4px;
}
#widget div {
background-color: #333;
color: #eee;
min-height: 150px;
padding: 10px;
}
#widget p {
-webkit-box-model: border-box;
margin-top: 1em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
p.new {
opacity: 0;
margin-left: 100px;
}
p.old {
opacity: 1;
-webkit-transition: margin-left 2s ease, opacity 1.5s;
-moz-transition: margin-left 2s ease, opacity 1.5s;
-o-transition: margin-left 2s ease, opacity 1.5s;
transition: margin-left 2s ease, opacity 1.5s;
}
.updated {
-webkit-box-shadow: 0 3px 20px white !important;
-moz-box-shadow: 0 3px 20px white !important;
box-shadow: 0 3px 20px white !important;
background-color: white !important;
-webkit-transition: -webkit-box-shadow 0.4s,background-color 0.4s;
-moz-transition: -moz-box-shadow 0.4s,background-color 0.4s;
-o-transition: box-shadow 0.4s,background-color 0.4s;
transition: box-shadow 0.4s,background-color 0.4s;
}
.idle {
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
-webkit-transition: -webkit-box-shadow 0.4s,background-color 0.4s;
-moz-transition: -moz-box-shadow 0.4s,background-color 0.4s;
-o-transition: box-shadow 0.4s,background-color 0.4s;
transition: box-shadow 0.4s,background-color 0.4s;
}
</style
</head>
<script type="text/javascript" charset="utf-8">
window.updateTimeoutHandle = null;
window.update = function(e) {
clearTimeout(window.updateTimeoutHandle);
var content = document.getElementById('content');
content.innerHTML += "<p class='new'>Clicked</p>";
e.className = "updated";
content.getElementsByClassName('new')[0].className = "old";
window.updateTimeout = setTimeout(function() {window.idle(e)}, 1500);
}
window.idle = function(e) {
clearTimeout(window.updateTimeoutHandle);
e.className = "idle";
}
</script>
<body>
<div id="widget" class="idle">
<div id="content">
<p>Hola</p>
<p><button type="button" onclick="window.update(document.getElementById('widget'));">Actualizar</button></p>
</div>
</div>
</body>
</html>